ajax 从 jsp 表单调用 servlet 并将其显示在 <div> 中答案

【问题标题】：ajax calls to a servlet from jsp form and display it in <div>ajax 从 jsp 表单调用 servlet 并将其显示在 <div> 中
【发布时间】：2018-01-26 09:21:47
【问题描述】：

所以我是 ajax 新手，目前正在尝试找出如何从 jsp 表单进行 ajax 调用，然后将其显示在 div 中。下面是运行良好并将数据加载到 divOrderResultContainer 中的 jsp 表单，我想知道如何通过执行 ajax 调用而不是每次都刷新页面来获得相同的结果。

索引.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 调用或向我指出一个好的示例吗？提前谢谢！！！

【问题讨论】：

标签： javascript java ajax jsp servlets

【解决方案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方法中。

【讨论】：