一,ajax是什么?
ajax,“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
一个page内,有个下拉框,表示部门列表,前端向后端发送一个请求,获取具体的列表。
这时候,没有做页面跳转,只是局部更新数据,就很适合发送ajax请求。如果发送jsp请求,那么就更新整个页面,跳转到其他地方去了。
在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化。
一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作。
二,怎么使用?
前端按照如下格式提交,可以提交单个参数,也可以提交form数据。(js原生的可能比较麻烦,使用jQuery封装的库比较方便。)
后端就是普通的Servlet,路径配置好,在前端请求的时候需要写url。
var configObj = {
method //数据的提交方式:get和post
url //数据的提交路径
async //是否支持异步刷新,默认是true
data //需要提交的数据
dataType //服务器返回数据的类型,例如xml,String,Json等
success //请求成功后的回调函数
error //请求失败后的回调函数
}
function login() {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/users/login" ,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("异常!");
}
});
}
三,返回的数据怎么处理?
数据返回,用json格式。
简单的说Ajax请求通过XMLHttpRequest对象发送请求,该对象有四个状态(readyState):
0-未初始化、1-正在初始化、2-发送数据、3-正在发送数据、4-完成。
当XMLHttpRequest.readyState为4时,表示ajax请求已经完成可以得到响应结果。
ajax的success和error方法根据响应状态码来触发。当XMLHttpRequest.status为200的时候,表示响应成功,此时触发success().其他状态码则触发error()。
除了根据响应状态码外,ajax还会在下列情况下走error方法:
1. 返回数据类型不是JSON
2. 网络中断
3. 后台响应中断
四,完整demo
前端
$(document).ready(function(){
$("button").click(function(){
$.post("/practice_system/Test1",{
name:"程哥",
url:"http://www.cheng1996.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
var jsonArray = JSON.parse(data);
console.log(jsonArray);
for(var i=0;i<jsonArray.length;i++)
{
console.log(jsonArray[0].name);
console.log(jsonArray[0].url);
}
});
});
});
后端Servlet,和普通的request请求一样,使用普通的servlet来处理
@WebServlet("/Test1")
public class Test1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String name = request.getParameter("name");
String url = request.getParameter("url");
System.out.println(name);
System.out.println(url);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");// 注意設置為utf-8否則前端接收到的中文為亂碼
PrintWriter out = response.getWriter();
Gson gson = new Gson();
ArrayList<Test1Object> arraylistTest = new ArrayList<Test1Object>();
Test1Object t1 = new Test1Object();
Test1Object t2 = new Test1Object();
t1.setName(name);
t1.setUrl(url);
t2.setName(name);
t2.setUrl(url);
arraylistTest.add(t1);
arraylistTest.add(t2);
String info = gson.toJson(arraylistTest);
// 打印出檢查
System.out.println(info);
// 返回給前端
out.write(info);
}
把所有信息内容都包装到一个json字符串里,然后通过out一次性输出到前端。
参考资料
AJAX 教程
https://www.runoob.com/ajax/ajax-tutorial.html
使用Servlet处理AJAX请求
https://www.cnblogs.com/chy18883701161/archive/2019/12/28/11431231.html
JQuery中Ajax的操作完整例子
https://blog.csdn.net/qq_33714487/article/details/79112555
利用ajax和servlet实现前后端数据交互(json)
https://blog.csdn.net/mm1030533738/article/details/81172956
基于servlet和ajax的前后台交互完整例子(通过json交互)
https://blog.csdn.net/HelloCode1900/article/details/81531415
使用ajax方法实现form表单的提交
https://www.cnblogs.com/han-1034683568/p/7199168.html
使用ajax提交form表单,包括ajax文件上传
https://www.cnblogs.com/zhuxiaojie/p/4783939.html
ajax接收遍历处理json格式数据
https://www.cnblogs.com/dibaosong/p/4572274.html
ajax在什么情况下会走success和error
https://blog.csdn.net/u011277123/article/details/60756511/