form表单提交和跳转

自己实例

1.表单提交

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。$(selector).submit(function)

使用 preventDefault() 函数来阻止对表单的提交。

ajaxSubmit()提交表单,使用第三方插件jquery.form实现；

通常情况下，我们直接通过form提交的话， 提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们比不希望提交表单后页面跳转，那么，我们就可以使用ajaxSubmit(obj)来提交数据。

这里涉及到表单的同步提交和异步提交。本文不赘述。

$('button').on('click', function() {
    $('form').on('submit', function() {
        var title = $('inpur[name=title]').val(),
            content = $('textarea').val();
        $(this).ajaxSubmit({
            type: 'post', // 提交方式 get/post
            url: 'your url', // 需要提交的 url
            data: {
                'title': title,
                'content': content
            },
            success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
                // 此处可对 data 作相关处理
                alert('提交成功！');
            }
            $(this).resetForm(); // 提交后重置表单
        });
        return false; // 阻止表单自动提交事件，必须返回false，否则表单会自己再做一次提交操作，并且页面跳转

    });
});

 如果要提交之后返回数据再触发ajax异步交互（实际就是一个按钮触发两个事件，后一个事件要等前一个事件完成的情况才触发）

$("#uploadImage").on("submit",function () { //触发form表单提交，url写在form标签
    $("#uploadImage").ajaxSubmit(options); // form表单提交后触发
    return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
});
var options = {
    //target: '#picSrc',          //把服务器返回的内容放入id为picSrc的元素中
    //beforeSubmit: function({
                }),  //提交前的回调函数
    success:function (backData) { //提交后的回调函数

        var sendData={
            "srcImageFile":backData.serviceIcon,
            "result":backData.serviceIcon,

        };
        $.ajax({
            url:"/Wisdom/smartCampus/service/cutPicture",//交互地址
            type:"post",//方法
            //dataType:"json",
            contentType:"application/json",//头部
            data:JSON.stringify(sendData),//数据
            success:function (backData) {
                $("#uploadImage").resetForm();//重置表单

            }
        })
    },
    timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求
};

 

jQuery.form.js用法

参考链接：感谢！！！

https://www.jb51.net/article/75692.htm

https://www.cnblogs.com/hgmyz/p/6708512.html

https://blog.csdn.net/m0_37505854/article/details/79639046

相关js：

jquery-3.3.1.min.js  ： http://jquery.com/download

jquery.form.min.js  ：http://malsup.com/jquery/form/#tab7

jquery form是一个表单异步提交的插件，可以很容易提交表单，设置表单提交的参数，并在表单提交前对表单数据进行校验和处理和表单提交后的函数调用。

表单代码：

<form id="form1" method="get" action="/day09/jqueryFormServlet">
    姓名:<input name="name" id="name" class="specialFields"><br>
    年龄:<input name="age" id="age" type="number" class="specialFields"><br>
    地址:<input name="address" id="address"><br>
    兴趣:<p>
    h1:<input type="checkbox" name="hobby" value="h1" checked="checked">
    h2:<input type="checkbox" name="hobby" value="h2">
    h3:<input type="checkbox" name="hobby" value="h3">
    h4:<input type="checkbox" name="hobby" value="h4">
        </p>
    性别:
    男:<input type="radio" name="sexuality" value="man" checked="checked"><br>
    女:<input type="radio" name="sexuality" value="girl"><br>
    <input type="submit" value="submit1" id="sub1">
    <input type="submit" value="submit2" id="sub2">

    <div id="p1">p</div>
</form>

　　

这个插件有两个主要方法：

ajaxForm() 和 ajaxSubmit()， 它们集合了从控制表单元素到决定如何管理提交进程的功能；

他们都可以接受0个或一个参数，参数可以为一个函数或者一个JS对象，类似json格式；

ajaxForm（）不能提交表单，只是为表单提交做准备：

①：传入函数

$("#form1").submit(function () {
$('#form1').ajaxForm(function () {
alert("提交成功2")
})
})
但是虽然我看了很多博客都是这样写，我实际代码运行之后发现，“提交成功2”并没有打印，也就是函数没有进去，
而且提交后，页面会跳转到action的地址，也就是说，这个方法不能实现表单的异步提交，只是为表单提交做准备，但传入一个函数的方式不适合这个方法，因为没有进去，不知道是不是我写的有问题。但是如果传入一个option是对象，就能生效。

 

var options = {
url: "/day09/jqueryFormServlet", //提交地址：默认是form的action,如果申明,则会覆盖
type: "post", //默认是form的method（get or post），如果申明，则会覆盖
beforeSubmit: beforeCheck, //提交前的回调函数
success: successfun, //提交成功后的回调函数
target: "#output", //把服务器返回的内容放入id为output的元素中
dataType: "json", //html(默认), xml, script, json...接受服务端返回的类型
clearForm: true, //成功提交后，是否清除所有表单元素的值
resetForm: true, //成功提交后，是否重置所有表单元素的值
timeout: 3000 //限制请求的时间，当请求大于3秒后，跳出请求
};
②：传入一个js对象

$('#form1').ajaxForm(options)
ajaxSubmit（）方法：实现表单的异步提交

$("#form1").submit(function () {
$('#form1').ajaxSubmit(function () {
alert("提交成功2")
})

return false;
})
这里必须返回false，不然表单会提交两次，因为异步提交一次，默认提交一次；

$('#form1').ajaxSubmit(options)
但如果传入options对象则只会提交一次，目前我不知道什么原理。

//表单提交前，数据校验
/*
* formData：表单元素数组对象，数组里面每一个元素都是一个<input>元素，可以通过.name、.value的方式访问元素
* 提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
* form: jQuery对象，封装了表单的元素
* options: options对象
* */
function beforeCheck(formData, form, options) {

//利用formData校验
//$.param(formData) 可以和formSerialize方法一样，实现表单元素的序列化
var queryString = $.param(formData);
$("#p1").html(queryString + "<br>")

for (var i = 0; i < formData.length; i++) {
//打印每一个元素的name属性和value值
//alert(formData[i].name + " " + formData[i].value)
}

//利用form校验
var formDom = form[0];

//formDom是jQuery表单对象，感觉类似数组，可以通过下标访问元素
//比如：formDom[0].targetName 表示元素标签名，INPUT
var name = formDom["name"].value;//这里寻找name为name或者id为name的元素的值
var age = formDom["age"].value;

alert(name+" "+age)
if (!name || !age) {
alert("name age 不能为空")
}

//利用fieldValue校验
//返回选择元素的value值，是一个数组
var name = $("input[name='name']").fieldValue();
var hobby = $("input[name='hobby']").fieldValue();
if (!name[0] || !hobby[0]) {
alert("必须填姓名和选择兴趣")
}

//把表单的元素序列化，：name=姓名&age=年龄；以字符串的方式拼接所有表单元素
var formSerializeStr = $("#form1").formSerialize();
alert(formSerializeStr)
//序列化某些表单元素 $("#form1 .ss")通过选择器选择某些元素
//这里就是选择表单里面，有specialFields样式的元素；但是这里我用属性选择器没有生效，比如$("#form1[name='name']")
var formSerializeStr = $("#form1 .specialFields").fieldSerialize();
alert(formSerializeStr)

return true;//如果return false，则校验不通过，表单不会提交
}

function successfun(data, status) {
//data是提交成功后的返回数据，status是提交结果 比如success
//返回数据的类型是通过options对象里面的dataType定义的，比如json、xml，默认是html

//这里data.success是因为我后天返回的json数据的一个属性 String jsonText = "{'success':'提交成功'}";
alert(data.success + " " + status)
}

一、jQuery.Form.js 配置选项options

选项 说明
url 表单提交数据的地址
type form提交的方式(method:post/get)
target 服务器返回的响应数据显示在元素(Id)号
beforeSerialize: function($form, options) 表单数据被序列化之前执行的回调函数，如果在内部return false将终止序列化和提交。
beforeSubmit: function(arr, $form, options) 表单数据被序列化成arr数组，并且在提交前触发的回调函数。
error 提交失败执行的回调函数
success 提交成功后执行的回调函数
data 除了表单数据外，还需要额外提交到服务器的数据
iframe 如果有<input type="file">是否应该使用iframe来上传文件(对旧版本浏览器而言)
iframeSrc 为<iframe>元素设定src属性值
iframeTarget 如果你想用自己的iframe来上传文件，可以将Id传给这个属性
dataType 期望服务器返回数据类型
clearForm 提交成功后是否清空表单中的字段值
restForm 提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
timeout 设置请求时间，超过该时间后，自动退出请求，单位(毫秒)
forceSync  
semantic  
uploadProgress  
二、可操作函数

函数 说明
ajaxForm 提交表单 与ajaxSubmit的区别在于是否触发浏览器的提交。
ajaxSubmit 提交表单
formSerialize 序列化表单
fieldSerialize 序列化字段
fieldValue 返回某个input的字段值
resetForm 重置表单为打开页时的状态
clearForm 清空表单的所有值
clearFields 清空某个字段值

1 引入 jQuery.js 和 jquery-form.js：

<script src="sources/jquery-1.9.1.js"></script>
<script src="sources/jquery-form.js"></script>

 

2 HTML 里写的代码就是很普通的表单控件：

<div id="showForm">
<form action="/postform" method="post" id="ajaxForm"> <!--postform 是用于提交的地址-->
<input type="text" name="user">
<input type="number" name="age">
<button type="submit">提交</button>
</form>
</div>

 

3 js 代码：

重点就是 js 代码的部分了，这是实现表单提交之后的显示的！

<script>
$( //页面加载完执行
$("#ajaxForm").on("submit",function () { //表单提交时监听提交事件
$(this).ajaxSubmit(options); //当前表单执行异步提交，optons 是配置提交时、提交后的相关选项
return false; // 必须返回false，才能跳到想要的页面
})
)
//配置 options 选项
var options = {
url: "/postform", //提交地址：默认是form的action,如果申明,则会覆盖
type: "post", //默认是form的method（get or post），如果申明，则会覆盖
success: successFun, //提交成功后的回调函数，即成功后可以定页面跳到哪里
dataType: "json", //接受服务端返回的类型
clearForm: true, //成功提交后，清除所有表单元素的值
resetForm: true, //成功提交后，重置所有表单元素的值
timeout: 3000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)
}
//设置提交成功后返回的页面
function successFun(data,status) {
$("#showForm").html(data.msg); //提交表单后从后台接收到的返回来的数据，我保存到了msg里
// $("#showForm").html("或者这里可以直接写想要显示的内容")
}
</script>

表单提交我们现在大部分用的都是ajax提交了,对于没有文件上传的表单,普通的ajax就可以实现,而对于有文件上传的表单,我一般使用jquery.form.js插件,感觉还是挺好用的

1.引入相应的js文件

<script src="__PUBLIC__/Wx/js/jquery.min.js"></script>
<script src="__PUBLIC__/Wx/js/jquery.form.js"></script>

 

2.

<script>

function Djly_form_add(){ 
$("#form-user-add").ajaxSubmit({
success: function (data) {
//if(data.code == '200'){ //这些是我demo里处理的代码,可不用理会
//layer.msg(data.message,{time:1000},function(){
//})
//}else if(data.code == '500'){
//layer.msg(data.message);
//}
},
error: function (error) { 
alert(error); //错误提示
},
url:"", //提交的地址
type: "post", //提交的方式
dataType: "json" //返回的数据类型
});
}

</script>

 

好了,以上就是jquery.form.js最简便的用法,后台接收值得话,文件就用$_FILES,普通值就用$_POST或$_GET,这我就不多说了,别忘了,form表单要写enctype="multipart/form-data" 的属性哦

 

自己实例：

这个直接用这个即可实现跳转。问题跳转的页面根据自己实际要跳转的页面进行跳转

<script>  
 $(      //页面加载完执行
        $("#ajaxForm").on("submit", function () {    //表单提交时监听提交事件
            $(this).ajaxSubmit(options);    //当前表单执行异步提交，optons 是配置提交时、提交后的相关选项
            return false;   //  必须返回false，才能跳到想要的页面
        })
    )
    //配置 options 选项
    var options = {
        url: "/Wave/GenerateWave",       //提交地址：默认是form的action,如果申明,则会覆盖
        type: "post",           //默认是form的method（get or post），如果申明，则会覆盖
        success: successFun,    //提交成功后的回调函数，即成功后可以定页面跳到哪里
        dataType: "json",       //接受服务端返回的类型
        clearForm: true,        //成功提交后，清除所有表单元素的值
        resetForm: true,        //成功提交后，重置所有表单元素的值
        timeout: 3000           //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)
    }
    //设置提交成功后返回的页面
    function successFun(data, status) {
        if (data.success) {
            window.location.href = "/Wave";
        } else {
            alert("数据处理状态：" + data.success + " 错误信息：" + data.msg + " 提交状态：" + status);
            window.location.href = "/Wave/GenerateWave";
        }
        //alert(data.msg);

        //window.location.href = "/Wave";
        //$("#showForm").html(data.msg);      //提交表单后从后台接收到的返回来的数据，我保存到了msg里
        // $("#showForm").html("或者这里可以直接写想要显示的内容")
    }
</script>

 

下面和这个要在form中

<form target="form" method="post" action="/CorssDocking/CorssDockingRegister" ajax="true" ajax-on-success="onSuccess(response)">

 

 

<script>
     function onSuccess(response) {
         if (response.success) {
             $("#form1").attr("action", contextPath + '/success');
            //alert("@Request.RawUrl");
            $(window).attr("location", "https://localhost:666/Wave");
            //window.location.href = "https://localhost:666/Wave";

        } else {
            alert("123");
        }
    }
</script>

 

测试的一些其他代码：

 <form id="form1" class="form-inline">

<button type="submit" id="bt" disabled class="btn btn-success btn-primary" style="margin-top:10px;">提交</button>

 

 

<script type="text/javascript">   

 $.ajax({
        url: 'https://localhost:666/Wave/GenerateWave',
        dataType: 'jsonp',
        data: $('.form-inline').serialize(),
        jsonp: 'callback',
        timeout: 5000,
        success: function (data) {
            if (data.status === "success") {
                $(window).attr("location", "http://...");
            } else if (data.status === "fail") {
                alert("用户名密码错误！！！");
            }
        },
        error: function () {
            alert("超时或服务器其他错误！！！");
        }
    });


    $(function () {
        /** 验证文件是否导入成功  */
        $('.form-inline').ajaxForm(function (data) {
            if (data == "1") {
                alert("提交成功！");
            }
        });
    });


    $(function () {
        $('#bt').click(function () {
            $.ajax({

                url:'https://localhost:666/Wave/GenerateWave',
                type: 'POST',
                dataType: 'JSON',
                data: $('.form-inline').serialize(),
                //success: function (arg) {
                //    if (arg.success) {
                //        window.location.href = 'https://localhost:666/Wave';
                //    } else {
                //        alert(arg.msg);
                //    }
                //}
            })
        })
    })
    $("#bt").click(function () {
        $('.form-inline').ajaxSubmit(function (data) {
            alert(data.msg);
        });
    });
    $(".form-inline").ajaxSubmit(function (data) {
        var mes = JSON.parse(date);
        alert(mes.tip);
        window.location.href = "https://localhost:666/Wave";

    });
</script>

 

最简单的实现表单提交：

<form method="post" ajax="true" ajax-redirect="#" action="/Wave/GenerateWave">

 

  <form action="@Url.Action()" method="post" role="form" ajax="true" ajax-redirect="@Url.Action("Index")">

 window.location.href 相关的链接：

https://www.jb51.net/article/105082.htm

https://www.jb51.net/article/50520.htm

https://www.jb51.net/article/168839.htm

https://blog.csdn.net/qq_37837134/article/details/79242148

https://www.cnblogs.com/huifeidezhuzai/p/10334813.html

 window.location：

https://www.cnblogs.com/gopark/p/10191577.html

https://www.jianshu.com/p/c9324d237a8e

弹窗：

https://zhidao.baidu.com/question/5407531.html

 

代码参考：

    $("#save").click(function () {
        js.loading("正在加载，请稍候...");
        var id = $("#id").val();
        var code = "";
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "${ctx}/xxx/xxx/xxxx/save",
            data: $('#inputForm').serialize(),
            success: function (resultMap) {
                code = resultMap.result;
                toastr.options = {positionClass: "toast-bottom-right"};
                toastr.success(resultMap.message);
                if(code=="yes"){
                    js.closeCurrentTabPage(function(contentWindow){
                        contentWindow.page();
                    });
                    var printView = '${ctx}/xxx/xxx/xxxx/printView?id='+id;
                    window.location.href = printView；
                }
            },
            error : function() {
                alert("网络异常！");
            }
        });
    });
             
 
    @PostMapping(value = "save")
    @ResponseBody
    public Map<String, Object> save(@Validated YourBean yourbean) throws RuntimeException {
        Map<String, Object> map = new HashMap<>();
        try {
                xxxService.save(yourbean);
                map.put("result", Global.YES);
                map.put("message", "保存成功！");
            }
        } catch (Exception e) {
            e.printStackTrace();
            map.put("result", Global.NO);
            map.put("message", "失败！");
        }
        return map;
    }

Jquery表单提交后获取返回Json值

1.给form添加id值：

<form action="/News/SaveMessage" method="post" accept-charset="utf-8" class="form" id="frm-reg" name="frm-reg">

设置所有input标签的name属性值为数据库的字段值，即可以传值到后台

2.给提交按钮添加id值：

<input class="sub-btn fl" type="button" id="sub" name="Submit" value="提　交">

3.引用jquery-form.js文件

4.jquery表单提交：

//表单提交,会把所有有name属性的值提交到后台
$("#sub").click(function () {
    $("#frm-reg").ajaxSubmit(function (data) {
        alert(data.Message);
    });
});

 

 

1.经常用form表单提交的小伙伴有没有发现，form表单默认的提交是没有返回值的，而且默认提交成功之后是跳转，跳转的action的路径，下面写一下默认的提交如何获取到form表单的返回值json，并且阻止默认的跳转动作。

 

 

页面结构见下面：

<form target="form" action="" enctype="multipart/form-data" method="post">

     <input type="file">

     <button type="submit"    id="submit" style="display:none">提交</button> 

</form>

<iframe name="form" id="form" style="display:none"></iframe>

 

//细心的小伙伴有没有发现上面的结构多了一个iframe的隐藏内联框架，其实最主要的就是我们的form表单的target属性值等于这个iframe的name和id，那么我们就可以用iframe来接收返回值，并且把默认的跳转让iframe去跳转，下面是js的代码，来获取这个返回值json。

$("#submit").click();

$("#form").load(function(){

      var text = $(this).contents().find("body").text();      //获取到的是json的字符串

     var j = $.parseJSON(text);                                         //json字符串转换成json对象

     console.log(j)

})

//注意，只要这个iframe框架加载完成就说明发送成功了。

ajax在success中location无法跳转页面问题

我在使用ajax的过程中,当返回成功信息的时候在success:function()跳转另一个页面使用了window.location("url")来跳转页面,出现了页面无法跳转的问题

下面是解决方法:

$.ajax({
            url:"http://...",
            dataType:"jsonp",
            data:{"fr_username":"admin","fr_password":"123456"},  
            jsonp:"callback",   
            timeout:5000,
            success:function(data){
                if(data.status==="success"){                    
                    $(window).attr("location","http://...");
                }else if(data.status === "fail"){  
                    alert("用户名密码错误！！！");
                }
            },
            error:function(){   
                alert("超时或服务器其他错误！！！");
                }   
        });

因为location是js的原生跳转的方法,而ajax是经过封装的jQuery,所以我们要用jQuery中的跳转方法才能生效

我们在success:function()中要使用$(window).attr("location","url")的方式跳转页面;

以上

 

Ajax提交页面跳转

Ajax提交请求时，在success方法中添加页面跳转。
1、 window.top.location.href、window.location.href等都不行，页面不会跳转，只是刷新页面。
2、 只有使用jQuery设置form action 属性才会跳转：

$("#form1").attr("action",contextPath+'/success');

3、那么没有form的页面是不是要添加一个form呢？其实可以直接设置window的location：
$(window).attr(‘location’,contextPath+”/search”);

例文：

$.ajax({
type : "post",
url : url,
async : false,
data : JSON.stringify(data),
dataType : "json",
contentType:"application/json",
success : function(data) {
if(data.result==0){
$("#form1").attr("action",contextPath+'/success');
}else{
$("#form1").attr("action",contextPath+'/success');
}
},
error : function() {
$.msg.alert("添加异常"); 
}
});

之前一直使用window.location.href跳转页面，但是在ajax请求处理中该方法失效，其只是刷新了一下页面，并没有跳转。网上搜了很久，也试了很多方法就是不行。然后就想到使用ajax提交时是用jQuery提供的方法，那么页面跳转是不是也可以使用jQuery提供的方法呢？结果真的可以。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户系统</title>
        <link rel="stylesheet" type="text/css" href="css/order1.css"/>
        <script type="text/javascript" src="js/jquery.min.js" ></script>    
        <script type="text/javascript" src="js/form.js" ></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js" integrity="sha384-tIwI8+qJdZBtYYCKwRkjxBGQVZS3gGozr3CtI+5JF/oL1JmPEHzCEnIKbDbLTCer" crossorigin="anonymous"></script>        
    </head>
    <body>
        <div class="outers">
            <div class="form_bj">
                <div class="form_outer">
                    <form action="bbb.php" method="post"  id="formid" name="myform"  οnsubmit="return submitForm();" >
                        <div class="uname"><img src="img/people.png" alt="" /><input autocomplete="off" placeholder="请输入您的姓名" type="text" name="name"  id="uname" value="" /></div>
                        <div class="phone"><img src="img/phone.png" alt="" /><input autocomplete="off"  placeholder="请输入您的电话" type="text" name="phone"  id="phonenum" value="" /></div>
                        <div class="adress"><img src="img/adress.png" alt="" />
                        <textarea  id="adress" placeholder="请输入您的地址"  name="adress"></textarea>                       
                        </div>
                        <div class="choose">选择你的需求数量</div>
                        <div class="chose_one">
                            <label class="chosed_one">
                                <label><input type="radio" name="box" value="1盒 " />1盒 </label>
                                <div class="original">原价：495元<img src="img/delate.png" alt="" /></div>
                                <div class="now">现价：465元</div>
                            </label>    
                            <label class="chosed_two after_click">
                                <label><input type="radio" name="box"  value="2盒" checked/>2盒 </label>
                                <div class="original">原价：990元<img src="img/delate.png" alt="" /></div>
                                <div class="now">现价：930元</div>
                            </label>
                            <label class="chosed_three">
                                <label><input  type="radio" name="box" value="3盒" />3盒 </label>
                                <div class="original">原价：1485元<img src="img/delate.png" alt="" /></div>
                                <div class="now">现价：1385元</div>                                
                            </label>
                        </div>
                        <button class="submit_btn"  type="submit" >提交需求</button>
                    </form>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            
            $(".chosed_one").click(function(){
               $(this).addClass('after_click');
               $(".chosed_two,.chosed_three").removeClass('after_click');               
            });    
            
            $(".chosed_two").click(function(){
               $(this).addClass('after_click');
               $(".chosed_one,.chosed_three").removeClass('after_click');               
            });
            $(".chosed_three").click(function(){
               $(this).addClass('after_click');
               $(".chosed_two,.chosed_one").removeClass('after_click');               
            });
            function isPhone(phone) {
                var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (phoneReg.test(phone)) {                        
                    return true;
                }
                else {        
                    return false;
                }
            }
            
            function isName(uname) {
                    var checkname = /^[\u4E00-\u9FA5]{2,6}$/;
                    if (checkname.test(uname)) {                        
                        return true;
                    }
                    else {        
                        return false;
                    }
            }

    
    function submitForm(){
    
    
        var phonenum = $("#phonenum").val();
        var uname = $("#uname").val();
        var adress=$("#adress").val();
        
           if(isPhone(phonenum)==false||phonenum == ""){
                alert("手机号不正确或为空");
                return false;
           }else if(isName(uname)==false||uname == ""){
                alert("请输入您的名字");
                return false;
           }else if(adress == ""){
           alert("您的地址不能为空");
                return false;
           }
           else{
            
             $("#formid").ajaxSubmit(function (date) {
             var mes = JSON.parse(date);
              alert(mes.tip);
              window.location.href="./aaa.html";    
              
            });
            return false;
            
           }
           
    }    
              
        </script>
    </body>
</html>

 

    Ajax发送请求经常遇到一些问题，其中比较有趣的一个问题是ajax发送一个请求给后端，后端无法进行重定向？

    先卖个关子了解一下ajax与form的提交的区别：

   1.ajax提交可以实现异步请求,在页面不刷新的情况下，数据就可以返回过来; 但是form提交之后页面会刷新，并获得信息。

   2.form在提交数据之后会刷新页面，并且当是post的时候再点击刷新的时候浏览器或提示是否再次提交。

Ajax提交则不会在点击提交之后自动刷新页面。

    后端关于两者的数据接收并无差别。 

    Form的enctype属性可以通过application/x-www-form-urlencoded 或 multipart/form-data来表达；

    参考：http://blog.csdn.net/soonfly/article/details/52082547

    ajax也可以通过设置header头部application/x-www-form-urlencoded来表示是一个form请求，但是其本质与纯粹的form提交还是有很大的区别的： 

   ajax是基于XMLHttpRequest对象发起请求的，XmlHTTPRequest的行为将依赖用户浏览器。一般来说XmlHTTPRequest不能得到这个消息头，也不能得到http 302的状态码，而是直接继续访问跳转页面Location: testpost.php，如果访问成功，直接返回http状态码200,并读取得到此页面的文本输出。

     当服务器发现客户session失效的时候，这个时候发生redirect，ajax是无法处理的，他只会将我们的redirect的结果当成数据获取；302状态只有浏览器才能进行处理，而且浏览器会为我们处理这个状态；这里的关键在xmlHttpRequest的核心在于他是客户端获取服务端数据的封装对象，至于服务端返回的是xml还是html或者其他数据流他不关心，所以中间的redirect的操作被当成响应结果处理了。

 

 

sx/ajax提交bai成功后采用以下方式跳转：du

1、本页面跳转:"window.location.href"、"location.href" 

2、上一层页面跳转:"parent.location.href"

3、最zhi外层的页面跳转:"top.location.href"

@RequestMapping(value="searchUser")

publicvoidsearchHome(HttpServletResponseresponse){

Stringresult=null;

...

查询用户dao的方法

...

if(查询成功){

result=JsonUtil.objectToJson(查询结果对象);//结果对象转化成Json字符串，在ajax的结果中跳转到用户详情的处理方法

AjaxUtil.ajax(response,result);

}else{//查询失败，返回提示信息

AjaxUtil.error(response,"查询用户失败");

}

}

 

 

 

 此处的重点在于如何在ajax的回调函数中调用普通方法，并将之前查询出的用户数据传到普通方法中（上面伪代码中红色的部分），继而跳转到用户详情页面。

 

 在body中写隐藏的form表单，在回调函数中把查到的用户数据复制给form表单中的input，然后提交表单跳转到普通方法中，这样就是以post方法提交的数据，并且可以跳转到新页面。

$.ajax({

type:"POST",

url: //你的请求bai程序页面随便

async:false,//同步：意思是当有返回du值以后才会进行zhi后面的js程序。

data://请求需要发dao送的处理数据

success:function(msg){

if (msg) {//根据返回值进行跳转

window.location.href = '你的跳转的目标地址';
}