Fatal编程技术网
  • javascript/
  • Javascript JQuery，EclipseWTP中的JavaServlet示例

Javascript JQuery，EclipseWTP中的JavaServlet示例

javascript jquery ajax servlets

Javascript JQuery，EclipseWTP中的JavaServlet示例,javascript,jquery,ajax,servlets,eclipse-wtp,Javascript,Jquery,Ajax,Servlets,Eclipse Wtp,有人能给我一个例子，说明如何在HTML页面中通过JQuery对JavaServlet进行ajax调用（请发布HTML页面、调用和Servlet类的完整代码）。 我想在Eclipse中的动态Web项目中实现这一点。我想web.xml也必须修改才能这样做，所以请解释如何修改这个文件。是否有其他必须修改的文件 提前致以问候和感谢， Michael首先，我创建了Servlet，它没有任何额外的代码来处理Ajax请求，因此在我的示例中，我从请求中获得两个参数，并将它们添加到一起，然后返回一个字符串，结果非

有人能给我一个例子，说明如何在HTML页面中通过JQuery对JavaServlet进行ajax调用（请发布HTML页面、调用和Servlet类的完整代码）。 我想在Eclipse中的动态Web项目中实现这一点。我想web.xml也必须修改才能这样做，所以请解释如何修改这个文件。是否有其他必须修改的文件

提前致以问候和感谢，
Michael

首先，我创建了Servlet，它没有任何额外的代码来处理Ajax请求，因此在我的示例中，我从请求中获得两个参数，并将它们添加到一起，然后返回一个字符串，结果非常简单

@WebServlet("/CalculatorServlet")
public class CalculatorServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //Get the parameters from the request
        String param1 = request.getParameter("param1");
        String param2 = request.getParameter("param2");

        int result = Integer.parseInt(param1) + Integer.parseInt(param2);
        String responseResult = "The result is " + result;

        response.setContentType("text/plain");
        response.getOutputStream().write(responseResult.getBytes());
    }

}
我使用的是Servlet容器的3.0版本，因此我可以使用注释@WebServlet指定Servlet Url映射的信息，而不需要修改我的web.xml

Html非常简单，它有两个输入来获取操作数，它有3个按钮，第一个按钮不使用Ajax调用servlet，第二个按钮使用Ajax调用servlet获取表单的参数，最后一个按钮使用Ajax调用，但它使用json发送参数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>

    <fieldset>
        <legend>Parameters</legend>
        <form id="form1" action="CalculatorServlet" method="get">
            <label for="param1" > Operand 1</label>
            <input type="number" id="param1" name="param1">
            <label for="" id="param2">Operand 2</label>
            <input type="number" id="param2" name="param2">
            <div>
            <input type="submit" value="Submit without Ajax">
            <input type="button" value="Submit with Ajax" id="btnCall1">
            <input type="button" value="Submit param1 and 2" id="btnCall2">
            </div>
        </form>
    </fieldset>

    <script>
        (function() {
            $("#btnCall1").click(function() {
                $.ajax({
                    url : "CalculatorServlet",
                    type: "get",
                    data: $("#form1").serialize(),                  
                    dataType: "text",                   
                    success: success,
                    error: error
                });
            });

            $("#btnCall2").click(function() {
                var param1Value = $("#param1").val();
                $.ajax({
                    url : "CalculatorServlet",
                    type: "get",
                    data: {param1: param1Value, param2: 2},                 
                    dataType: "text",                   
                    success: success,
                    error: error
                });
            });

            function success(data, textStatus, jqXHR)
            {
                alert(data);
            }

            function error(jqXHR, textStatus, errorThrown)
            {
                alert("error "+textStatus);
            }
        })();
    </script>
</body>
</html>


计算器
参数
操作数1
操作数2
（功能（）{
$（“#btnCall1”）。单击（函数（）{
$.ajax({
url:“CalculatorServlet”，
键入：“获取”，
数据：$（“#form1”）.serialize（），
数据类型：“文本”，
成功：成功，
错误：错误
});
});
$（“#btnCall2”）。单击（函数（）{
var param1Value=$（“#param1”）.val（）；
$.ajax({
url:“CalculatorServlet”，
键入：“获取”，
数据：{param1:param1Value，param2:2}，
数据类型：“文本”，
成功：成功，
错误：错误
});
});
函数成功（数据、文本状态、jqXHR）
{
警报（数据）；
}
函数错误（jqXHR、textStatus、ERRORSHORN）
{
警报（“错误”+文本状态）；
}
})();
*观察：*我使用get方法是因为我想在没有ajax调用的情况下显示答案，您应该使用POST。我用Tomcat7.0测试这个例子。如果您需要接收要序列化为对象的数据（您需要接收一个对象）或返回用于通信JSON的对象，并且在servlet中使用一些JSON序列化程序，我建议您使用GSON o Jackson，因此您将接收一个JSON字符串作为参数并在servlet中反序列化，要响应，请将对象序列化为JSON并在响应中发送，如果发送JSON，则需要更改jquery ajax调用so data的data属性：“JSON”

以及WTP项目中的HTML页面在哪里？在文件夹Web content下Servlet在哪里？在文件夹Java resources？No下，servlet位于src Folder中的一个包中，不幸的是，这在我的应用程序中不起作用。当我尝试访问servlet中的参数时，它们都为null。