Jquery互動的方式都有哪些-前端問答-PHP中文網

Jquery互動的方式都有哪些

青灯夜游

發布： 2023-01-04 09:15:45

原創

2461 人瀏覽過

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

Jquery互動的方式都有哪些

本教學操作環境：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("{&#39;name&#39;:&#39;爱你&#39;,&#39;age&#39;:12}");
response.getWriter().print(jsonObject);

登入後複製

相同的最終傳遞給前台的時候都預設以字串的形式傳遞過去，

注意的是除了

getJSON方式
前台可以用兩種方式來將字串轉換成js物件：

1. eval（）函数  ：不推荐，有隐患 会执行其他js操作
2. JSON.parse（）函数 ：推荐：只执行对象转换操作

登入後複製

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

第五個：jQuery.ajax()：
執行非同步HTTP (Ajax) 請求
該方法是jQuery 底層AJAX 實現，所有的jQuery AJAX 方法都使用ajax() 方法。。簡單易用的高層實作見 .get

，
以上是Jquery互動的方式都有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！