Ajax， 励志做一名Java全干工程师
$(励志做一名Java全干工程师)
前言：JS，JSP，JQ区别？
JSP:JavaServer pages，他是作用于后端的技术，基于java的语言，混合了html，动态的调用html语句，实现动态的效果
JS：Java script，是前端的脚本语言，是动态脚本语言，就像php一样，ajax就是通过JS+xml实现的
JO：Java Query，是js的库，里面含有大量的。也就是说ajax是通过JQ+xml实现的
JS面试题方面：
函数：闭包 （）（）--->自己调用自己
Dom：document，操作文档对象
id，name，tag
create，remove
Bom：操作Bom元素，浏览器对象模型，
Window，操作浏览器的事件
ES6：新特性，let
let，一般用于遍历上，让其所修饰的参数变成局部变量
var，在没有let前，用var，它不区分范围，全局变量
wackpace：打包方式
一，Ajax实现过程
既然是刚接触必然先画个图熟悉一下
流程图画出来就基本掌握json的方法了
下面在说一遍流程：
1.用户在输入框输入信息，通过失去焦点的方法，让用户的信息实时的自动提交
2.通过Ajax的方式（实现Ajax需调用JQ的库）去获得这个事件（Ajax.post() 与$.post(）一样）
3.$.post({
url:"${pageContext.request.context}/所要连接的Controller方法映射地址",
data:{"name":${"#username"}.val()}, name：对应的是controller中所映射的方法的参数，注意，username前必须加#，作用，锁住用户携带的参数，才能给controller层的方法传参，
success:function(data){} controller层的方法中通过特定业务需求的处理并放回了一个json给success，sucess也可在对此时的data再处理或直接返回给浏览器。
})
好！下面看2个小demo就懂了
1.从后端获取一组json对线，并打印到前端
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/statics/jquery.js"></script>
<script>
<%--预加载--%>
$(function (){
<%--锁定元素--%>
$("#btn").click(function (){
<%--测试用的控制台输出--%>
//console.log("111");
/*
$.post(url,param[可以省略],success)
* */
$.post("${pageContext.request.contextPath}/a2",function (data){
//console.log(data);
var html="";
/*let，es6新特性，让它所修饰的i尽在当前模块生效，局部变量
* 以前js是没有区域约束，用var修饰的参数在哪里都会被调用
**/
for (let i = 0; i <data.length; i++) {
html+="<tr>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].age+"</td>"+
"<td>"+data[i].sex+"</td>"+
"</tr>"
}
$("#content").html(html);
});
});
});
</script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content" >
<%--数据：后台--%>
</tbody>
</table>
</body>
</html>
2.登录验证，且错误有提示（利用Ajax实现）
<%-- Created by IntelliJ IDEA. User: 33422 Date: 2020/11/15 Time: 19:46 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/jquery.js"></script> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/a3", data:{"name":$("#name").val()}, success:function (data){ if(data.toString()==='ok'){ $("#userInfo").css("color","green"); }else { $("#userInfo").css("color","red"); } $("#userInfo").html(data); } }) } function a2(){ $.post({ url:"${pageContext.request.contextPath}/a3", data:{"pwd":$("#pwd").val()}, success:function (data){ if(data.toString()==='ok'){ $("#pwdInfo").css("color","green"); }else { $("#pwdInfo").css("color","red"); } $("#pwdInfo").html(data); } }) } </script> </head> <body> <p> 用户名：<input type="text" id="name" onblur="a1()"> <span id="userInfo"></span> </p> <p> 密码：<input type="text" id="pwd" onblur="a2()"> <span id="pwdInfo"></span> </p> </body> </html>
