所属分类：web前端开发
Jquery交互的方式有：1、load方式，从服务器加载数据，并把返回的数据放入被选元素中；2、GET方式，通过HTTP GET请求从服务器请求数据的；3、POST方式，通过HTTP POST请求从服务器请求数据的；4、getJSON方式，返回的就直接是json格式的对象；5、jQuery.ajax()方式；6、依附于表单的表单的局部刷新方式。
本教程操作环境：windows7系统、jquery3.6版本、Dell G3电脑。
第一种：load，从服务器加载数据，并把返回的数据放入被选元素中
微博登录
QQ登录<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，
以上就是Jquery交互的方式都有哪些的详细内容，更多请关注zzsucai.com其它相关文章！
