ajax从jsp表单调用servlet并显示在<div>

Question

so i am new to ajax and currently trying to find out how to make ajax call from jsp form and then display it in div. 所以我是ajax的新手，目前正试图找出如何从jsp表单进行ajax调用，然后在div中显示它。 Below is the jsp form which works fine and loads the data in divOrderResultContainer, i want to know how to get the same result by doing ajax call instead of refreshing the page everytime. 下面是可以正常工作并在divOrderResultContainer中加载数据的jsp表单，我想知道如何通过执行ajax调用而不是每次刷新页面来获得相同的结果。

Index.jsp 的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>

my servlet OrderController.java 我的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);        
    }

    }

Can someone explain to me about how can we do ajax call from jsp form after the user click the submit button or point me to a good examples ? 有人可以向我解释一下在用户单击“提交”按钮后，如何从jsp表单进行ajax调用，或者为我提供了一个很好的示例吗？ Thanks in advance !!! 提前致谢！！！

Answer 1

Use this for ajax request and response purpose 将此用于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) {
                    });});
                });

In servlet use, 在servlet使用中，

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

This will output the string for ajax response.Place this code in doPost method of servlet. 这将输出用于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