AJAX与JSON

mac2022-06-30 27

原生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>\n" + " <td>ID</td>\n" + " <td>姓名</td>\n" + " <td>密码</td>\n" + " </tr>") $userArray.each(function () { $("#tId").append("<tr>\n" + " <td>"+this.id+"</td>\n" + " <td>"+this.name+"</td>\n" + " <td>"+this.pwd+"</td>\n" + " </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);

转载于:https://www.cnblogs.com/jiayiblog/p/11037906.html

最新回复(0)