前端 ajax 改写登录界面

SSM 整合项目开发到一个阶段，想慢慢地把前台框架等技术引入进来

突然碰到一个困惑好久的问题：

ajax 替换原本 form 表单 post 提交登录：

一直 404 错误，心塞。。。。

最后发现原来是 ajax 绑定 button click 事件时候，会触发 form 表单的 post 方法，从而 改变 url 地址 cancel 掉了 XHR 的请求。。。阿西吧。。。

记得去掉这个 form标签啊啊啊啊！！！

<form action=.....method.....>

不用 js 的表单提交

 //最原始的jquery实现表单提交
       /* $("#login").click(function(){
            // method="post" action="/loginCheck"
            $("#loginForm").attr("action","/loginCheck");
            $("#loginForm").attr("method","post");
            $("#loginForm").submit();
        });*/

最原始的jquery表单提交

关键 AJAX 代码：

$(function(){}  当然这个是要包裹在外层的

$("#login").click(function(){
    var allData = {'name':$("#userName").val() , 'password':$("#password").val()}
    $.ajax({
        type:"post",
        url:"${pageContext.request.contextPath}/loginCheck",
        contentType:"application/json;charset=utf-8",
        dataType:"json",
        data:JSON.stringify(allData),
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
            alert(errorThrown)
        },
        success:function(data){
            alert(data['result']);
            var response=data['result'];
            if(response==="false"){
                window.location.href="/login";
            }
            else {window.location.href="/items/queryItems";}
        }
    })
});

jquery ajax 登录代码

最后，还是 建议不要用 ajax 做登录验证，虽然 ajax 可以实现，但是直接 form 表单提交是明智的选择，不用暴露 参数

最后呢，引用一波 别人的说法，使用 form 的 submit 方法 避免 参数暴露

Ajax post请求跳转页面
转载  2016-12-30   作者：荒年-yang     我要评论

这篇文章主要介绍了Ajax post请求跳转页面的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
最近因为公司需求，需要ajax post请求并跳转界面，网上搜了一下资料，差不多都是用window.location.href来处理，但是在请求页面的地址栏中会暴露请求的参数，这是不安全的。

?
1
2
3
4
5
6
7
8
$.post(
url,
{method:"regist",userName:$nameEle.val(),email:$emailEle.val(),password:$passwordEle.val()},
function(data) {
//注册成功页面跳转，
window.location.href ="../yiliaoqixie/login.html?name="+$nameEle.val();
}
);
因此，只能想到了通过form表单来进行post提交。

?
1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="action" id="fm">
</form>
$.post(
url,
{method:"regist",userName:$nameEle.val(),email:$emailEle.val(),password:$passwordEle.val()},
function(data) {
//注册成功页面跳转，
  var fm=document.getElementById("fm");
  fm.submit();
}
);

看看思想