day13 AJAX

AJAX

是 异步的js 和 xml

是一种无需重新加载整个网页的情况下，能够更新部分网页的技术

get： 参数是写在url里面 （长度有限制） 相对不安全 高效

post： 参数是写在http 包体里面的 （长度无限制） 相对安全

JQuery

是js 的一个封装库

导入

网页登入写法

ssm 常规写法 ： jsp页面 配合dao mapper controller 进行登入逻辑

jsp

    <form action="${pageContext.request.contextPath}/user/login.do"
              method="post">
            用户姓名：<input type="text" name="username"><br><br><br>
            用户密码：<input type="text" name="password"><br><br><br>
			<input type="submit" value="添加" >
    </form>

js硬核实现

硬核方法 和写安卓网络连接的工具类有点类似

jsp:

<form action="${pageContext.request.contextPath}/user/login2.do"
      method="post">
    用户姓名：<input type="text" id="username" name="username"><br><br><br>
    用户密码：<input type="text" id="password" name="password"><br><br><br>
    <input type="button" value="登入" οnclick="postLogin()"/>
</form>

js:

    <script type="text/javascript">
        //1.获取表单中的值
        function postLogin() {

            var username=document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var params = "username="+username+"&password="+password;
            console.log(params);
            //2.创建XMLHttpRequest对象
            var request = new XMLHttpRequest();

            //3.发送请求
            request.open("post","${pageContext.request.contextPath}/user/login2.do",true);
            //设置请求头，一定要设置请求头
            request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            request.send(params);

            //4。监听状态
            request.onreadystatechange =function () {
                if (request.readyState == 4 && request.status ==200){
                    var aaa = request.responseText;
                    if(aaa=="success")
                        alert("登入成功");
                    else
                        alert("失败");
                }
            }
        }
    </script>

controller

    @RequestMapping("login.do")
    public String login(TbUser user){
        int count = userService.login(user);
        if(count == 0){
            System.out.println("登入失败");
            return "forward:../index.jsp";
        }else{
            System.out.println("登入成功");
            return "redirect:findAll.do";
        }

    }

Ajax + JQuery

听方便

jsp：

    <table border="1">
        <tr>
            <td colspan="2" align="center">GET的登录请求，使用jquery实现</td>
        </tr>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username" id="username"/></td>
        </tr>
        <tr>
            <td>密码名:</td>
            <td><input type="text" name="password" id="password"/></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="登录" id="loginBtn" οnclick="postlogin();">
            </td>
        </tr>
    </table>

js：

    <script type="text/javascript">
        function postlogin() {
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                type:'post',
                url:"${pageContext.request.contextPath}/user/login2.do",
                data:{
                    username:username,
                    password:password
                },
                success:function (data) {
                    alert(data);
                    if(data=="success111"){
                        
                    }
                },
                error:function () {
                    alert("失败");
                }
            })
        }
    </script>