在 jsp 中使用 ajax 序列化表单数据

Question

我有一个包含物品清单的表格（例如书籍）每个项目都有ID 当我发送带有 ajax 的表格时，我无法获得 bookID，它总是给我第一个 ID 而不是选定的 ID :(

项目显示为 table，带有隐藏按钮以表示 bookID 我是 ajax 和 jsp

的新人

任何帮助将不胜感激谢谢

    <script>
    function sendRequestform(formid){



        var form= document.getElementById(formid);

         var dataString = $(form).serialize();

        console.log(dataString);
        alert(dataString);

$.ajax( {
    type: 'get',
    url: 'RequestBook',
    data: dataString,
    success: function(data) {
        alert("su");


        console.log(data);
        $('#bookSharedType').html(data);
        $('body').append(data);
    }
})
    // Set the tooltip content upon successful retrieval
   // api.set('content.text', content);
 ;


}




<table border="2" width="60%" align="center">
    <tr>

        <th>Title</th>
        <th>Author</th>

        <th>category</th>
        <th>status</th>
        <th>entedDate</th>


        <th>option</th>
    </tr>

    <c:forEach var="row" items="${result.rows}">

        <tr>
            <td style="cursor: pointer;">${row.title}</td>
            <td>${row.auther}</td>
            <td>${row.category}</td>
            <td>${row.status}</td>
            <td>${row.enterdDate}</td>



            <td>

                <form action="RequestBook" method="post" name ="formNam" id="ff">
                    <input type="hidden" name="bookID" id="bookID" value="${row.bookID}">//here is the problem it always show me the ID for the first item

                    <input type="hidden" name="actionGetBookST" value="Request">
                    <input type="button" value="Book" onclick="sendRequestform('ff');"> // this call of the ajax
                </form>

        </td>


    </c:forEach>

Answer 1

我发现您的代码存在几个问题，

HTML 元素 ID 应该是唯一的，但是您拥有与 'ff' 相同 ID 的每一行的表单，甚至表单元素 ID 都是重复的
你真的不需要这里的表格，因为你没有提交它。您可以将 bookId 传递给函数 sendRequestform 并将数据发送到服务器

我可以像下面这样重写你的代码：

    <tr>
        <td style="cursor: pointer;">${row.title}</td>
        <td>${row.auther}</td>
        <td>${row.category}</td>
        <td>${row.status}</td>
        <td>${row.enterdDate}</td>
        <td><input type="button" value="Book" onclick="sendRequestform(${row.bookID});">
        </td>

function sendRequestform(bookId, pro){
    alert("book Id "+ bookId)
    $.ajax( {
        type: 'get',
        url: 'RequestBook',
        data: {"bookId" :bookId, "bookProvider" : pro},//append any other elements if you want to send
        success: function(data) {
            alert("su");
            console.log(data);
            $('#bookSharedType').html(data);
            $('body').append(data);
        }
    });
    }

在 jsp 中使用 ajax 序列化表单数据

serialize form data with ajax in jsp

ajax

serialization

jsp