通过ajax提交带有多个字段的表单-如何将数据格式化为JSON

Submitting form with multiple fields via ajax - how to format the data into JSON?

本文关键字：数据 数据格式 JSON 格式化 表单 提交 ajax 字段 通过      更新时间：2023-09-26

我有一个包含多个数据项的表单。Ajax（位于底部）要求将传递给它的数据捆绑在一起。如何将表单字段中未提交的文本打包成JSON对象发送到Ajax？

 <div id="editUserPinForm" class="ui raised segment signin">
  <div class="cmborder">
    <div class="form_heading">Edit Your Pin</div>
    <form>
      <div class="ui form attached fluid segment">
        <div class="two fields">
          <div class="field">
            <label>Title</label>
            <input type="text" name="pin[title]" class="ui input" value="{{pin/title}}">
          </div>
          <div class="field">
            <label>Activity</label>
            <input type="text" name="pin[activity]" class="ui input" value="{{pin/activity}}">
          </div>
        </div>
        <div class="field">
          <label>Description</label>
          <textarea name="pin[description]" class="ui input">{{pin/description}}</textarea>
        </div>
        <div class="inline field">
          <input type="hidden" name="pin[guideID]" value="{{pin/guide_id}}">
        </div>
        <div class="inline field">
          <input type="hidden" name="pin[lat]" value="{{pin/lat}}">
        </div>
        <div class="inline field">
          <input type="hidden" name="pin[long]" value="{{pin/long}}">
        </div>
        <div class="inline field">
          <input type="submit" value="Submit Changes" class="ui blue submit button">
        </div>
      </div>
    </form>
  <span class='close_message' id="messageclose">&times;</span>
  </div>
</div>
<script>
  $( "#messageclose" ).on("click", function() {
      $('#editUserPinForm').fadeOut();
    });
  $("#editUserPinForm").submit(function() {
      $.ajax({
           type: "PATCH",
           url: "api/pins/{{pin/id}}",
           contentType: 'application/json',
           dataType: 'json',
           data: JSON.stringify( {pin:{description:value}})
           }).success: function(response){
               alert(response); //response from server.
           };
      });

</script>

我使用了jQuery Serialize，它的工作效果很好。

https://github.com/macek/jquery-serialize-object

的问题

JSON.stringify($(this).serializeArray());

它将数组转换为JSON，但数组添加了"名称"answers"值"，这使得生成的JSON非常难以使用。

您可以使用内部jQuery$（'#domNode'）.serializeArray（），它将返回对象数组中所有输入的数组。它遵循W3C模式，为成功的控件返回有效的输入，这意味着它不会返回禁用的控件。

参考：
https://api.jquery.com/serializeArray/
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

为了将表单作为json字符串发送。您必须创建一个具有输入名称和值对的数组，方法是收集每个输入名称和价值，将它们关联到包含名称和价值对的对象数组中：

$("#editUserPinForm").submit(function() {
jQuery("#editUserPinForm").find("input").each( function()
{
var form_data = new Array(); // The array that'll contain inputs names and values
form_data.push( { $(this).attr('name') : $(this).val() } );
var form_jsoned = JSON.stringify(form_data);
// Then here you can call ajax and send the json data
$.ajax({
       type: "PATCH",
       url: "api/pins/{{pin/id}}",
       contentType: 'application/json',
       dataType: 'json',
       data: form_jsoned
       }).success: function(response){
           alert(response); //response from server.
       };
}
}
相关文章：