JQuery, Java Servlet Examplet within Eclipse WTP

JQuery, Java Servlet Examplet within Eclipse WTP

本文关键字：within Eclipse WTP Examplet Servlet Java JQuery      更新时间：2023-09-26

有人能给我一个例子，告诉我如何在HTML页面中通过JQuery对Java Servlet进行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>

*观察：*我使用get方法，因为我想用无ajax调用来显示答案，所以应该使用POST。我用Tomcat7.0测试了这个例子。如果你需要接收要序列化为对象的数据（你需要接收一个对象），或者返回需要用于通信的对象JSON，并且在servlet中使用一些JSON序列化程序，我建议你GSON o Jackson，这样你就可以接收一个JSON字符串作为参数并在servlet中反序列化，以响应将你的对象序列化为JSON并发送响应，如果您发送JSON，您需要更改jquery ajax调用的数据属性，以便data:"JSON"

相关文章：