我怎样才能只调用html表行而不是发送整个表单输入？

Question

我已经尝试使用post to jsp脚本我的html表行几周来没有成功。任何人都可以指导我这个吗？下面是我到目前为止所做的。

window.addEventListener("DOMContentLoaded", function () {

            var form = document.getElementById("updateDealPmtForm");

            document.getElementById("btn").addEventListener("click", function () {


                $('#notSoCoolGrid > tr').each(function(event) {

                    event.preventDefault();

                    var postData = {
                        paymentId:$('#paymentId').text(),
                        id:$('#deald').text(),
                        pType:$('#pType').text(),
                        pAmt:$('#pAmt').text(),
                        currency:$('#currency').text(),
                        pInvDate:$('#pInvDate').text(),
                        pRecDate:$('#pRecDate').text(),
                        comments:$('#comments').text()
                    };
                    console.log(postData);
                    $.ajax({
                        async: false,
                        type: "POST",
                        cache: false,
                        url: "/update_deal_pmt_script.jsp",
                        data: postData.$('input, select').serialize() ,
                        success: function(msg){
                            alert("submitted");
                        }

                    });
                });


            });

Answer 1

如果我正确理解您的需求，您希望传输行的内容，每个内容都以当前postData中显示的形式发送。

所以这可以立即为所有行设置（而不是连续ajaxing每个行）。
它可能是这样的：

window.addEventListener("DOMContentLoaded", function () {
    var form = document.getElementById("updateDealPmtForm");
    document.getElementById("btn").addEventListener("click", function () {
        event.preventDefault();
        var postData = [];
        $('#notSoCoolGrid > tr').each(function(event) {
            postData.push(
                paymentId:$('#paymentId').text(),
                id:$('#deald').text(),
                pType:$('#pType').text(),
                pAmt:$('#pAmt').text(),
                currency:$('#currency').text(),
                pInvDate:$('#pInvDate').text(),
                pRecDate:$('#pRecDate').text(),
                comments:$('#comments').text()
            );
        });
        console.log(postData);
        $.ajax({
            async: false,
            type: "POST",
            cache: false,
            url: "/update_deal_pmt_script.jsp",
            data: postData,
            success: function(msg){
                alert("submitted");
            }
        });
    });
});

请注意，我选择（最简单的方法，IMO）来创建一个简单的行数组，其中每个行都是一个像你已经构建它们的对象。

最后一点：我注意到您指定了async: false 我不知道你为什么这样做，所以我保持不变 但请注意，这是不推荐的，并且正在被弃用。

Answer 2

我终于能够解决这个问题了，因为我想发布我的回答它可能对那里的人有帮助。我之前的代码提交了一个表单，甚至在ajax调用被触发之前我必须使用Classes而不是用于标识我的行的ID。我必须完全更改代码才能提交表单

$('#btn').click(function(e) {
            e.preventDefault();

            $('#notSoCoolGrid tr').each(function(i, tr) {

                var postData = {
                    paymentId : $('.paymentId', tr).val(),
                    id : $('.deald', tr).val(),
                    pType:$('.pType', tr).val(),
                    pAmt:$('.pAmt',tr).val(),
                    currency:$('.currency',tr).val(),
                    pInvDate:$('.pInvDate',tr).val(),
                    pRecDate:$('.pRecDate',tr).val(),
                    comments:$('.comments',tr).val()
                }



                $.ajax({
                    async: false,
                    type: "post",
                    url: "/update_deal_pmt_script.jsp",
                    data: postData
                })
                        .done(function(response) {
                            console.log(response);
                        })
                        .fail(function(x, status, error) {
                            alert("Error: " + error);
                        });
            });
        });