Question

我正在寻求改进我的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");
            }
        });
    });

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

亲切的问候，

路

Answer 1

是。如果您将对象（标准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"

请注意，如果需要，还可以使用转义符号。

Answer 2

请查看jquery serialize（）和serializeArray（）函数。它们提供了一种获取表单数据的简洁方法。

Answer 3

$.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");
                             },
        });

使用jQuery序列化数据

3 个答案: