使用jQuery序列化数据

这段代码将数据提交到另一个PHP页面进行处理。

目前我正在从表单提交数据，并从页面的自定义数据属性中获取数据。

下面的代码

// Add new comment to nit on comment.php page 

$('#new_comment_form').bind('submit', function(e) { 

     // Prevent default 
     e.preventDefault(); 

     var commentNitId = $('#left_content').attr('data-nit-id'); 

     var commentData = 'nit_id=' + commentNitId + '&new_comment_text=' + $('textarea.new_comment').val(); 

     $.ajax({ 
      type: "POST", 
      url: "ajax/addComment.php", 
      data: commentData, 
      dataType: "json", 
      success: function(comment_response) { 

       // Code upon success 

      }, 
      error: function() { 
          // Error 
       alert("Error adding comment"); 
      } 
     }); 
    });

我只是想知道是否有一个更好的（“整洁”）的方式来序列准备提交到表单中的数据？

亲切的问候，

卢克

来源

2011-09-22 Luke

是的。如果您提供一个对象（标准Javascript对象）作为$.ajax作为data选项，那么jQuery将为您处理序列化。

$.ajax({ 
    type: "POST", 
    url: "ajax/addComment.php", 
    data: { 
     nit_id: commentNitId, 
     new_comment_text: $('textarea.new_comment').val() 
    }, 
    dataType: "json", 
    success: function (comment_response) { 

     // Code upon success 
    }, 
    error: function() { 
     // Error 
     alert("Error adding comment"); 
    } 
});

如果您想要这样做，内部使用的功能是jQuery.param。所以：

jQuery.param({ 
    nit_id: 5, 
    new_comment_text: 'foobar' 
}); 
// output: "nit_id=5&new_comment_text=foobar"

请注意，这有额外的好处在必要时转义字符。

来源

2011-09-22 11:46:51 lonesomeday

请看看jQuery的序列化（）和serializeArray（）函数。他们提供了一种简洁的方式来获取表单数据。

来源

2011-09-22 11:46:11

嗨Pipalayan，我已经探索了这些函数，但是我的复杂化来到基于表单元素和数据属性生成序列化数组。我如何合并这两个？再次感谢！ – Luke

@LukeCoulton不幸的是，没有直接的方法来获取基于数据属性的序列化数组{serializeArray（）为您提供基于“name”属性的数组）。对于任何其他自定义属性，您必须遍历表单元素并找到您的值。 –

$.ajax({ 
      dataType: 'json', 
      type:'post', 
      url: "ajax/addComment.php", 
      data:$(this).parents('form:first').serialize(), 
          success: function (comment_response) { 

            // Code upon success 
           }, 
          error: function() { 
             // Error 
           alert("Error adding comment"); 
          }, 
     });

来源

2011-09-22 11:56:34 chetanspeed511987

使用jQuery序列化数据

回答

相关问题