原生AJAX的流程步骤(原理)
1 //创建XMLHttpRequest对象 2 var xmlHttpRequest = new XMLHttpRequest(); 3 //初始化组件/创建HTTP请求 4 xmlHttpRequest.open("POST","/LoginServlet",true); 5 //设定回调函数 6 xmlHttpRequest.onreadystatechange = callBack; 7 //设定函数主体 8 function callBack(flag) { 9 if(xmlHttpRequest.readyState == 4 &&xmlHttpRequest.status == 200){ 10 if(flag=="false") 11 {alert("用户名或密码错误！"); 12 } 13 } 15 //发送请求 24 xmlHttpRequest.send(opr="login");
其他方式：
1 *$.ajax( 2 { 3 url:"/AjaxDemoServlet", 4 type:"POST", 5 data:"opr=login&name="+name+"&pwd="+pwd, 6 //后台返回的数据类型 要与它的类型保持一致 7 dataType:"json", 8 success:callBack, 9 error:function () { 10 alert("验证过程错误！") 11 } 12 } 13 )
$.post("/AjaxDemoServlet","opr=login&name="+name+"&pwd="+pwd,callBack,"text");
$.get("/AjaxDemoServlet","opr=login&name="+name+"&pwd="+pwd,callBack,"json");
$.getJSON("/AjaxDemoServlet","opr=login&name="+name+"&pwd="+pwd,callBack);
$(function () { // $.get("/SelectServlet","opr=html",callBack,"html"); // function callBack(data) { // $("body").html(data); // } $("body").load("/SelectServlet","opr=html"); })
全局 Ajax 事件处理器
这些方法用于注册事件处理器，用来处理页面上的任何 Ajax 请求，当某些事件触发后，这些事件处理器被调用。如何 jQuery.ajaxSetup() 中的 global 属性被设置为 true （这也是默认设置），那么，每个 Ajax 请求都会触发全局事件。注意：全局事件绝对不会被跨域（cross-domain）脚本或 JSONP 请求触发，和 global 属性的设置毫无关系。
.ajaxError()
Ajax请求出错时注册一个回调处理函数，这是一个 Ajax Event。
.ajaxSend()
在Ajax请求发送之前绑定一个要执行的函数，这是一个 Ajax Event.
.ajaxStart()
在AJAX 请求刚开始时执行一个处理函数。 这是一个 Ajax Event.
.ajaxStop()
在AJAX 请求完成时执行一个处理函数。 这是一个 Ajax Event。
.ajaxSuccess()
绑定一个函数当 Ajax 请求成功完成时执行。 这是一个Ajax Event.
https://www.html.cn/jqapi-1.9/category/ajax/global-ajax-event-handlers/
JSON
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
//定义JSON格式的user对象
var user = {
"id" : 1,
"name" : "恰同学少年",
"pwd" : "123456"
}
//输出对象内容
//$("#dId").html("用户ID:"+user.id+"用户姓名:"+user.name+"用户密码:"+user.pwd) ;
$("#dId").append("<li>用户ID:"+user.id+"</li>");
$("#dId").append("<li>用户姓名:"+user.name+"</li>");
$("#dId").append("<li>用户密码:"+user.pwd+"</li>");
//定义JSON格式的数组对象
var arry = ["北京","上海","广州","深圳"];
var $sel = $(arry);
$sel.each(function (i) {
if(this=='广州'){
$("#sId").append("<option value='"+this+"'selected>"+this+"</option>")
}else {
$("#sId").append("<option value='"+this+"'>"+this+"</option>")
}
})
//创建JSON格式的user对象数组
var userArray = [
{
"id" : 1,
"name" : "微冷的雨",
"pwd" : "123456"
},
{
"id" : 2,
"name" : "山间的风",
"pwd" : "123456"
},
{
"id" : 3,
"name" : "恰同学少年",
"pwd" : "123456"
}
]
var $userArray = $(userArray);
$("#tId").append("<tr>
" +
" <td>ID</td>
" +
" <td>姓名</td>
" +
" <td>密码</td>
" +
" </tr>")
$userArray.each(function () {
$("#tId").append("<tr>
" +
" <td>"+this.id+"</td>
" +
" <td>"+this.name+"</td>
" +
" <td>"+this.pwd+"</td>
" +
" </tr>")
})
})
</script>
</head>
<body>
${name}登陆成功！
<div id = "dId">
<select id="sId">
<%--<c:if test = "this=='广州'">--%>
<%--$("#sId").append("<option value='"+this+"'selected>"+this+"</option>")--%>
<%--</c:if>--%>
<%--<c:if test = "i!=2">--%>
<%--$("#sId").append("<option value='"+this+"'>"+this+"</option>")--%>
<%--</c:if>--%>
</select>
</div>
<table id="tId" border="1px">
</table>
</body>
</html>
fastjson
将list变为JSONlist对象 (需要导入fastjson.jar包)
String newsJSON = JSON.toJSONString(list);