經常用form表單提交的小夥伴有沒有發現，form表單預設的提交是沒有返回值的，而且預設提交成功之後是跳轉，跳轉的action的路徑，下面寫一下預設的提交如何獲取到form表單的返回值json，並且阻止預設的跳轉動作。

第一種方式 ：讓form預設調整當前的iframe 即可

頁面結構見下面：

<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框架載入完成就說明發送成功了。

第二種：引入 引用jquery-form.js檔案

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);
    });
});