Jquery的交互方式有哪些

今天小編給大家分享一下Jquery的交互方式有哪些的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Jquery交互的方式有：1、load方式，從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中；2、GET方式，通過HTTP GET請求從服務(wù)器請求數(shù)據(jù)的；3、POST方式，通過HTTP POST請求從服務(wù)器請求數(shù)據(jù)的；4、getJSON方式，返回的就直接是json格式的對象；5、jQuery.ajax()方式；6、依附于表單的表單的局部刷新方式。

jquery ajax前后臺交互的6種方式

第一種：load，從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中

<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("失?。?quot;+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內(nèi)容，  
加載到指定的 <div> 元素中：
實(shí)例：
$("#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的方法轉(zhuǎn)換。

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

第一種后臺交互：直接拼接字符串。

response.getWriter().  
print("{\"name\":\"愛你\",\"age\":12}");

第二種 傳入JSON對象：

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

相同的最終傳遞給前臺的時(shí)候都默認(rèn)以字符串的形式傳遞過去，
注意的是除了getJSON方式 前臺可以使用兩種方式來將字符串轉(zhuǎn)換成js對象：

1. eval（）函數(shù)  ：不推薦，有隱患 會執(zhí)行其他js操作
2. JSON.parse（）函數(shù) ：推薦：只執(zhí)行對象轉(zhuǎn)換操作

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

沒錯 還有一種：

第五種：jQuery.ajax()：

執(zhí)行異步 HTTP (Ajax) 請求

該方法是 jQuery 底層 AJAX 實(shí)現(xiàn)，所有的 jQuery AJAX 方法都使用 ajax() 方法。

以上就是“Jquery的交互方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。