Jquery互動的方式都有哪些

Jquery互動的方式有：1、load方式，從伺服器載入資料，並把返回的資料放入被選元素中；2、GET方式，通過HTTP GET請求從伺服器請求資料的；3、POST方式，通過HTTP POST請求從伺服器請求資料的；4、getJSON方式，返回的就直接是json格式的物件；5、jQuery.ajax()方式；6、依附於表單的表單的區域性重新整理方式。

本教學操作環境：windows7系統、jquery3.6版本、Dell G3電腦。

jquery ajax前後臺互動的6種方式

第一種：load，從伺服器載入資料，並把返回的資料放入被選元素中

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失敗："+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>
登入後複製

下面的例子把 "demo_test.txt" 檔案中 id="p1" 的元素的內容，  
載入到指定的 <div> 元素中：
範例：
$("#div1").load("demo_test.txt #p1");
登入後複製

第二種：GET方式：

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});
登入後複製

第三種：POST方式：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是誰",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>
登入後複製

POST要和後臺Servlet互動：

response.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
        response.getWriter().println("你找到我了");
登入後複製

後臺輸出：

我是誰
12
登入後複製

要存取後臺servlet也可以直接如此寫地址：

$.get("JsonServlet",
登入後複製

第四種：getJSON方式：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是誰",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>
登入後複製

返回的就直接是json格式的物件，無需JSON.parse的方法轉換。

注意：不管是哪種方式後臺都有兩種方式和前臺互動：

第一種後臺互動：直接拼接字串。

response.getWriter().  
print("{\"name\":\"愛你\",\"age\":12}");
登入後複製

第二種傳入JSON物件：

JSONObject jsonObject =  
new JSONObject("{'name':'愛你','age':12}");
response.getWriter().print(jsonObject);
登入後複製

相同的最終傳遞給前臺的時候都預設以字串的形式傳遞過去，
注意的是除了getJSON方式 前臺可以使用兩種方式來將字串轉換成js物件：

1. eval（）函數  ：不推薦，有隱患 會執行其他js操作
2. JSON.parse（）函數 ：推薦：只執行物件轉換操作
登入後複製

你們是不是還要問不是有五種嗎為啥子前面就講了四種？

沒錯還有一種：

第五種：jQuery.ajax()：

執行非同步 HTTP (Ajax) 請求

該方法是 jQuery 底層 AJAX 實現，所有的 jQuery AJAX 方法都使用 ajax() 方法。。簡單易用的高層實現見 .get $.get,$ .post 等。$.ajax() 返回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。

可以這麼理解：

前四種是高階方法，是對ajax（）進行了封裝，更加簡潔。可以理解為Jquery和JavaScript之間的關係。

$.ajax的一般格式

$.ajax({

 type: 'POST',

 url: url ,

data: data ,

success: success ,

dataType: dataType

});
登入後複製

$.ajax的引數描述

引數 描述
url 必需。規定把請求傳送到哪個 URL。
data    可選。對映或字串值。規定連同請求傳送到伺服器的資料。
success(data, textStatus, jqXHR)    可選。請求成功時執行的回撥函數。
dataType    
可選。規定預期的伺服器響應的資料型別。

預設執行智慧判斷（xml、json、script 或 html）。
登入後複製

舉例：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.ajax({
                url : "/Json/JsonServlet",
                type : "POST",
                async : true,
                dataType : "json",
                data : {
                    name : "前臺資料",
                    age : 12
                },
                success : function(result) {
                    $("#mydiv").html(result.name);
                },
                error : function(xhr) {
                    alert("錯誤提示： " + xhr.status + " " + xhr.statusText);
                }
            });
        });
    });
</script>
登入後複製

後臺：

        request.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
登入後複製

後臺輸出：

前臺資料
12
登入後複製

注意：
data還可以用字串拼接：一樣的效果多個引數中間要用&分割

data : "name=前臺資料string&age=12",
登入後複製

那什麼時候使用呢？

$.post、$.get是一些簡單的方法，  
如果要處理複雜的邏輯，還是需要用到jQuery.ajax()

該方法通常用於其他方法不能完成的請求，比如網址錯誤。
登入後複製

如果是表單提交的可以參照我開頭最後一個連結

方法六：表單的區域性重新整理（依附於表單）

序列化表單方法：

serialize():將表單內容序列化成一個字串。

serializeArray()：將表單內容序列化成一個物件陣列

這裡只介紹：serialize()

看script：

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            //var frm=$("#form1").serializeArray();
            var frm = $("#form1");
            $.ajax({
                url : frm.attr("action"),
                type : frm.attr("method"),
                async : true,
                data : frm.serialize(),
                //var data=$("#form1").serializeArray();

                success : function(data) {
                    alert("ok");
                },
                error : function(data) {
                    alert(data.status);
                }
            });
        });
    });
</script>
登入後複製

form表單：

    <form id="form1"
        action="${pageContext.request.contextPath}/ClassServlet" method="POST">
        <input type="text" name="name" /> <input type="password"
            name="password" /> <input type="button" id="mybutton" value="點我" />
    </form>
登入後複製

注意：
使用：serialize()

這時表單的按鈕的type不可以是submit，否則自提交資料，  
也就是自動重新整理； 用Ajax的serialize()提交表單，  
如果input的type為submit，提交時就會自動重新整理，  
所以，用serialize()提交表單的時候最好把type改為button.
登入後複製

【推薦學習：、】

以上就是Jquery互動的方式都有哪些的詳細內容，更多請關注TW511.COM其它相關文章！