本教程操作环境：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" 的元素的内容， 加载到指定的 元素中：实例：$("#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 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
可以这么理解：
前四种是高级方法，是对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表单：
登录后复制注意：使用：serialize()
这时表单的按钮的type不可以是submit，否则自提交数据， 也就是自动刷新； 用Ajax的serialize()提交表单， 如果input的type为submit，提交时就会自动刷新， 所以，用serialize()提交表单的时候最好把type改为button.
登录后复制【推荐学习：jQuery视频教程、web前端视频】
以上就是Jquery交互的方式都有哪些的详细内容，更多请关注php中文网其它相关文章！
