站长资讯网
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，.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得
