Question

我正在尝试做什么

我正在使用Netbeans构建一个小型webapp，它可以搜索ZIP代码。布局是使用bootstrap.css完成的。现在我在我的（index.jsp）中创建了以下表单：

<form id="form_submit_search"
                      class="navbar-form navbar-right" 
                      role="form"
                      action="zipSearchHandler" 
                      method="get">

                        <div class="form-group">
                            <input name="tv_zip" 
                                   type="text" 
                                   placeholder="ZIP Code..." 
                                   class="form-control"> 
                        </div>

                        <button id="submit_search" 
                                type="submit" 
                                class="btn btn-success">Search</button>
                </form>

按下按钮后，调用servlet中的方法：

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String zipCode = request.getParameter("tv_zip");
        System.out.println(zipCode + " habe den zip bekommen");

        response.setContentType("text/html;charset=UTF-8");
        List<String> list = new ArrayList<String>();
        list.add("item1");
        list.add("item2");
        list.add("item3");
        list.add(zipCode);
        String json = new Gson().toJson(list);

        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
    }

这给了我一个简单的json数组，它在一个新站点中打开，但是我想在index.jsp中的某些<div>中显示该响应。我怎么能这样做？

Answer 1

你可以使用这样的东西

$.ajax(
  {
    type: "POST", 
    url: "/TestServlet",
    data: { tv_zip: '90210' }, // zipcode
    dataType: "json",
    success: function(response) {
      // replace the contents of div with id=some_div with the response.
      // You will want to format / tweak this.
      $('#some_div').html(response); 
    },
    error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
  }
);

在某些<div> </div>中显示Servlet响应

1 个答案: