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>