Question

我想知道如何从servlet进行获取和发布，并在jsp页面中使用jquery ajax来获取响应并将其发布。我已经完成了doget。如果可能的话，我想从我的jsp中删除jstl页面。请帮助我。在此先感谢

这是我的控制器类

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    //get the data from database ie the model class
    try {
        List<Script> scriptitems=modelDBUtil.getScriptList();
        request.setAttribute("scriptItems", scriptitems);
    } catch (ClassNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    /*String itemsfood[]={"biriyani","rice"};
    request.setAttribute("itemsfood",itemsfood)*/;



    //redirect to a different page
    RequestDispatcher dispatcher =request.getRequestDispatcher("scriptviewer.jsp");

    dispatcher.forward(request, response); 
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doGet(request, response);
  }

}

}

现在我的jsp页面请在这里帮助我

 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Menu</title>
    </head>
<body>
<p>Script Items</p>

<c:forEach var="items" items="${scriptItems}">


    ${items.id} ${items.command}
</c:forEach>
<form action="appendfile.jsp" method="post">
    <select name="department">
          <c:forEach var="item" items="${scriptItems}">
            <option value="${item.id}">${item.command}</option>
          </c:forEach>
       </select>
       <button type="submit" id="idsubmit">Submit</button>
</form>




</body>
</html>

Answer 1

在这里，您可以从我的jsp页面中删除jstl并将其设置为html。

您需要使用这些jquery CDN，也可以直接使用javascript。

另外，您需要下载 Gson 库以获取servlet的响应。这段代码将与get方法一起使用。

这是将您的itemsfood发送到html or jsp的方式 将您的doGet方法修改为：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    try {
        List<Script> scriptitems=modelDBUtil.getScriptList();
        request.setAttribute("scriptItems", scriptitems);
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
    } catch (SQLException e) {
        e.printStackTrace();
    }

    String itemsfood[]={"biriyani","rice"};
    List<String> list = Arrays.asList(itemsfood);
    String json = new Gson().toJson(list);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json); 

}

HTML或jsp代码是

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link
	href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<link
	href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<link rel='stylesheet' type='text/css'
	href='http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' />
<link rel="stylesheet"
	href="https://jqueryvalidation.org/files/demo/site-demos.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">
	$(document).ready(
			function() {
				$.get("appendfile or (add your serveletName here)", function(
						responseJson) {
					var $select = $("#item");
					$select.find("option").remove();
					$.each(responseJson, function(value, key) {
						$("<option>").val(key).text(key).appendTo($select);
					});
				});
			});
</script>
<title>Menu</title>
</head>
<body>
	<form name=myform id="mForm">
		<select name="item" required id="item">
			<option value="Select">select</option>
		</select>
		<button type="submit" id="idsubmit">Submit</button>
	</form>

</body>
</html>

Answer 2

这是将JSP中的json发送到Servlete的方法，请参考此代码带有评论

  $("#mForm").submit(function(e) {  //your form ID chane it here 
        e.preventDefault();
        var $form = $(this);
        if (!$form.valid()) return false;

        var url = "yourServeleteName";
        $.ajax({
          type: "POST", //the method you want invoke 
          url: "yourServeleteName",  //Add here your servelete name
          data: $("#mForm").serialize(),  //your form ID remove default action from your form
          success: function (data)  //This is to handle if you want any response from Servlete
          {
            alert(data);  //it will alret you message you send from servelete
            //$("#mForm")[0].reset();  /if any form you can reset it option 
          }
        });

      });
    }

我想知道如何在jsp servlet Web项目上使用ajax和jquery获得响应和发布响应

2 个答案: