使用jQuery提交表單（json編碼，ajax，解析原始url /方法）

我發現了很多關於提交沒有json的表單並提交靜態指定javascript代碼中的url和方法的表單的問題。使用jQuery提交表單（json編碼，ajax，解析原始url /方法）

但是我真正想要的是一種方式，使我所有的表單都能以指定格式的確切方式發送ajax請求，唯一的區別是我希望數據是json編碼。提交時

例如一個形式類似這樣的

<form role="form" action="api/login" method="POST"> 
    <input name="email" value="[email protected]" type="text"/> 
    <input name="password" value="mypassword" type="text"/> 
    <button type="submit">Login</button> 
</form>

應自動生成這樣一個Ajax請求：

POST /api/login HTTP/1.1 
Content-type: application/json 

{ 
    "email": "[email protected]", 
    "password": "mypassword" 
}

沒有我不得不再次指定的JavaScript代碼的方法或URL。

而且我不想爲我寫的每個表單編寫新代碼。我只想擁有一個自動將上述內容應用於任何表單的代碼片段。

來源

2016-07-22 Forivin

所以綁定到提交功能，讀出的動作，序列化表單字段成JSON，進行Ajax調用。 – epascarello

並確保在提交處理程序中返回false，以防止原始表單提交;） –

@epascarello是的，這聽起來是正確的。但它應該綁定到位於表單內的任何提交，並且應該使用父表單的原始方法+ url。 – Forivin

你嘗試這樣的事情

$(document).on('submit','form',function(e){ 
    e.preventDefault(); 
    $form = $(this); 

    $.ajax({ 
     type: $form.attr('method'), 
     url: $form.attr('action'), 
     data: getObject($form.serializeArray()), 
     success: function (response) { 
      //Success Handler 
     } 
    }); 
    return false; 
}); 

function getObject(data) { 
    var paramObj = {}; 
    $.each(data, function(_, kv) { 
     if (paramObj.hasOwnProperty(kv.name)) { 
      paramObj[kv.name] = $.makeArray(paramObj[kv.name]); 
      paramObj[kv.name].push(kv.value); 
     } 
     else { 
      paramObj[kv.name] = kv.value; 
     } 
    }); 
    return paramObj; 
}

來源

2016-07-22 18:53:59 vijaykumar

如果你想執行ajax提交，你將需要返回false來壓制標準提交。 –

謝謝@Ji_in_coding。添加了返回false。 – vijaykumar

是e.preventDefault（）;並返回false;都有必要？ – Forivin

$(function() { 
    $('form').submit(function(){ 
     $.post(
      $(this).attr('method'), 
      $('form').serialize(), 
      function (data) { 
       proccessmyData(data); 
      } 
     ); 
     return false;  
    }); 
});

你可以寫成功的回調與proccessmyData（數據）

來源

2016-07-22 18:56:10

原始表單的URL和方法被使用的地方在哪裏？ – Forivin

用方法更新了答案 –

使用jQuery提交表單（json編碼，ajax，解析原始url /方法）

回答

相關問題