在JSP示例上形成Ajax数据

Question

I would like to form data parameter correctly inside ajax call.

<script type="text/javascript">
    $(document).ready(function() {
        $('#call').click(function ()
        {
            $.ajax({
                type: "post",
                url: "books", //this is my servlet
                data: <<< my data here >>>
            });
        });

    });
</script>

This is part of my jsp:

<form action="books" method="post">
    <table width="70%" border="1">
        <%
            List<Book> books = (List<Book>) request.getAttribute("books");

            for (int i = 0; i < books.size(); i++) {
        %>
        <tr>

            <td>
                <input type="checkbox" name="book<%=i%>"
                       value="<%= books.get(i).getBook_id()%>"> <%= books.get(i).getName() %>
            </td>

        </tr>
        <%
            }
        %>
    </table>

    <select name="user_name">
        <%
            List<User> users = (List<User>) request.getAttribute("users");
            for (int i = 0; i < users.size(); i++) {
        %>
        <option value="<%=users.get(i).getName()%>"><%=users.get(i).getName()%></option>
        <%
            }
        %>
    </select>
    <input type="submit" name="submit" value="Purchase">
    <input type="button" value="Call Servlet" name="Call Servlet" id="call"/>
</form>

I would like to pass everything that normally passes by form above. Could you please show me around ajax technology by this example?

Answer 1

Give an instance id to the form and use with the serialize() method

       $('#form').submit(function ()
        {
            $.ajax({
                type: "post",
                url: "books", //this is my servlet
                data: $(this).serialize()
            });
        });


    <form id="form" action="books" method="post">
        <table width="70%" border="1">
            <%
                List<Book> books = (List<Book>) request.getAttribute("books");

                for (int i = 0; i < books.size(); i++) {
            %>
            <tr>

                <td>
                    <input type="checkbox" name="book<%=i%>"
                           value="<%= books.get(i).getBook_id()%>"> <%= books.get(i).getName() %>
                </td>

            </tr>
            <%
                }
            %>
        </table>

        <select name="user_name">
            <%
                List<User> users = (List<User>) request.getAttribute("users");
                for (int i = 0; i < users.size(); i++) {
            %>
            <option value="<%=users.get(i).getName()%>"><%=users.get(i).getName()%></option>
            <%
                }
            %>
        </select>
        <input type="submit" name="submit" value="Purchase">
        <input type="button" value="Call Servlet" name="Call Servlet" id="call"/>
    </form>