Question

我有一个包含多个数据条目的表单。 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>

Answer 1

我使用了jQuery Serialize，它就像一个魅力。

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

的问题

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

是它将数组转换为JSON，但该数组添加了一个＆＃34; Name＆＃34;和＆＃34;价值＆＃34;这使得生成的JSON真的很难使用。

Answer 2

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

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

Answer 3

为了将表单作为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.
       };
}
}

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

3 个答案: