JavaEE_10Ajax学习任务:ajax:Asynchronous JavaScript and XML利用ajax可以做到不刷新页面而刷新页面内容，通过异步与做事器真个交互办法，提高了用户体验度。实现:利用浏览器供应的一个XMLHttpRequest工具，异步向做事器发送要求。做事器返回部分数据，数据封装到XMLHttpRequest工具中(js)，对网页做局部更新。1.编写jsp页面，事宜处理1,创建XMLHttpRequest工具2,封装XMLHttpRequest工具建立连接open("get/post",url,true);发送要求send(null(get)/parameter(post))3,吸收从做事器端相应回来的内容onreadystatechange事宜，是在向做事器端发送要求后触发，吸收做事器端返回的数据状态就绪码:readyState状态码:statusresponseText 得到返回的数据2.在servlet中对事宜进行处理通过PrintWrite输出3.对servlet在web.xml中对servlet进行配置或通过表明进行配置4. Ajax1.jsp以及干系是同步要求测试 Ajax2.jsp以及干系是异步要求测试 Ajax3.jsp为Ajax2Servlet的post要求 setRequestHeader("content-type","application/x-www-form-urlencoded")设置要求头把稳利用什么要求必须在servlet中重写该要求方法。JSON:(JavaScript Ojbect Notation)是一种轻量级的数据交流格式。数据在键值对中，数据由逗号隔开，大括号保存工具，方括号保存数组Servlet中:1，导入json的jar包2，在对应的servlet类中创建Json工具 Gson gson = new Gson();3，转换对应的数据 String jsonstr = gson.toJson(user);JSP中:将json字符串转为js工具 var obj = $.parseJSON(jsonstr);得到多个工具时采取循环得到并进行格式化:var str = "";for(var i = 0;i < obj.length; i++){str += "账号:"+obj[i].account+",性别:"+obj[i].sex+",年事:"+obj[i].age+"<br/>";}Jquery封装JSON: 通过out.print()返回相应结果: get要求:get要求 地址 要求参数 键 : 值 回调函数，要求成功后，读取相应内容结束后实行，data吸收相应结果$.get("Ajax2Servlet",{account:account},function(data){document.getElementById("id").innerHTML = data;});post要求: $.post("Ajax2Servlet",{account:account},function(data){document.getElementById("id").innerHTML = data;});ajax要求:更灵巧$.ajax({url:"Ajax2Servlet",// 要求地址type:"post",// 要求办法data:{account:account},// 要求数据success:function(data){document.getElementById("id").innerHTML = data;}});通过json返回相应结果:get要求(单个工具): $.get("user",{account:account},function(data){$("#msgId").html("账号:"+data.account+",性别:"+data.sex+",年事:"+data.age);},"json"); get要求(多个工具):没有要求数据 $.get("ListUser",null,function(data){// 循环并按指定格式得到多个工具var str = "";for(var i = 0;i < data.length; i++){str += "账号:"+data[i].account+",性别:"+data[i].sex+",年事:"+data[i].age+"<br/>";}// 赋值给指定id的标签中$("#msgId").html(str);},"json"); ajax中的post要求:$.ajax({url:"ListUser",type:"post",data:{account:account},dataType:"json",success:function(data){// 循环并按指定格式得到多个工具var str = "";for(var i = 0;i < data.length; i++){str += "账号:"+data[i].account+",性别:"+data[i].sex+",年事:"+data[i].age+"<br/>";}// 赋值给指定id的标签中$("#msgId").html(str);}})JSON对表单提交:$("#formId").serialize() 自动将表单数据序列化为userName=jim&sex=男 $.post("saveForm",$("#formId").serialize(),function(res){if(res == 1){alert("保存成功");}else{alert("保存失落败");}})
原文链接：https://blog.csdn.net/qq_44129924/article/details/114585069
