Question

我有一个包含项目列表的表单（例如书籍）每个项目都有ID 当我用ajax发送此表单时，我无法获取bookID，它总是给我第一个ID而不是所选的ID :(

显示为带有隐藏按钮的表格的项目，用于表示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序列化表单数据

1 个答案: