ajax從jsp表單調用servlet並顯示在<div>

Question

所以我是ajax的新手，目前正試圖找出如何從jsp表單進行ajax調用，然后在div中顯示它。 下面是可以正常工作並在divOrderResultContainer中加載數據的jsp表單，我想知道如何通過執行ajax調用而不是每次刷新頁面來獲得相同的結果。

的index.jsp

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/view.css" media="all">
<script type="text/javascript" src="JavaScript/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="JavaScript/Calender.js"></script>
</head>
<body>
</div>
<hr>
<div id = "divuserinputContainer">
<table align="center" id="table">
<form name="orderform" action="OrderController" onsubmit="return validateForm()" method="POST"">         
<td class="label">Branch Number
<select name="branch" >
<option selected value="0">All Branches</option><option selected value="1">100</option>                                                   
</select>
</td>
<td class="label">Service Type
<select class="SelectionBoxes" id="Serviceselect" name="Serviceselect" >
<option selected value="A">All</option>
<option value="D">Delivery</option>
</select>
</td>
<td class="label" >Order Status
<select class="SelectionBoxes" id="Orderstatus" name="Orderstatus">
<option selected value="O">All</option>
<option value="P">Placed</option>
</select>
</td>
<td>
<button class="submit" name="submit" id="submit">Submit</button></td>
</form>
</tbody>
</table>
</div>
<hr>
<div id="divOrderResultContainer">
<table id="ViewOrderResultContainer" border=1>
<thead><tr><th>OrderNumber</th>
<th>ServiceType</th>
<th>OrderStatus</th>
</tr></thead><tbody><c:forEach items="${orders}" var="order"><tr>
<td><c:out value="${order.ordernumber}" /></td>
<td><c:out value="${order.slotservice}" /></td>
 <td><c:out value="${order.orderstatus}" /></td>
</tr></c:forEach></tbody></table>
</div>
</body>
</html>

我的servlet OrderController.java

@WebServlet(name="OrderServlet",urlPatterns={"/OrderController"})
public class OrderController extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public OrderController() {
        super();

    }   
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        Int branchNumber = request.getParameter("branch");      
        String serviceType = request.getParameter("Serviceselect");     

        OrderDao dao = new OrderDao();
        try {           
            request.setAttribute("orders",dao.getallorders(branchNumber,serviceType));              
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        RequestDispatcher view = request.getRequestDispatcher("Index.jsp");
        view.forward(request, response);        
    }

    }

有人可以向我解釋一下在用戶單擊“提交”按鈕后，如何從jsp表單進行ajax調用，或者為我提供了一個很好的示例嗎？ 提前致謝！！！

Answer 1

將此用於ajax請求和響應目的

 $(document).ready(function () {
                $('#pinServId1').click(function () {
                    var value= $("inputField Id").val();
                    var request = $.ajax({
                        url: "/servletUrl",
                        method: "POST",
                        dataType: "text",
                        data: {userPassword: value}
                    });
                    request.done(function (response) {
                        $('#IdofDivtoDisplayOutput').val(response);
                    });
                    request.fail(function (jqXHR, textStatus) {
                    });});
                });

在servlet使用中，

        OutputStream outStream = response.getOutputStream()) {
        response.setContentType("text/xml");
        outStream.write(stringVariableName.toString().getBytes());//change name
        outStream.flush();

這將輸出用於ajax響應的字符串。將此代碼放在servlet的doPost方法中。

ajax從jsp表單調用servlet並顯示在<div>

問題描述

1 個解決方案

解決方案1
0 2017-08-18 09:38:32

ajax從jsp表單調用servlet並顯示在<div>

問題描述

1 個解決方案

解決方案1 0 2017-08-18 09:38:32

解決方案1
0 2017-08-18 09:38:32