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 = '你的跳轉的目標地址';
}