• 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>

  • 相关阅读:
    Objective-C Collection was mutated while being enumerated crash
    C++ assert断言
    Objective-C 禁用NSMenu中的系统services菜单项
    django----命令
    django----admin源码流程
    django----admin
    django----利用Form 实现两次密码输入是否一样 ( 局部钩子和全局钩子 )
    django----基于Form组件实现的增删改和基于ModelForm实现的增删改
    java----面试题
    课外知识----ini
  • 原文地址:https://www.cnblogs.com/CL-King/p/13976454.html
Copyright © 2020-2023  润新知