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,
以上就是jquery交互的方式都有哪些的详细内容。