JSP 如何使用servlet和Ajax？

46qrfjad  于 5个月前  发布在  其他
关注(0)|答案(7)|浏览(53)

每当我在servlet中打印一些东西并通过web浏览器调用它时，它都会返回一个包含该文本的新页面。
我对Web应用程序和servlet非常陌生。

jsp

7条答案

按热度按时间
8oomwypt

8oomwypt1#

实际上，关键字是“Ajax”：Asynchronous JavaScript and XML。然而，近年来它更多地是 Asynchronous JavaScript and JSON。基本上，您让JavaScript执行异步HTTP请求并根据响应数据更新HTML DOM树。
由于它在所有浏览器上都是相当tedious work to make it to work的（尤其是Internet Explorer），有很多JavaScript库可以将其简化为单个函数，并尽可能多地覆盖特定于浏览器的bug/怪癖，例如jQuery，Prototype，Mootools。

Kickoff示例以纯文本形式返回String

创建一个/some.jsp，如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4112686</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            const yourServletURL = "${pageContext.request.contextPath}/yourServlet";
            $(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
                $.get(yourServletURL, function(responseText) {  // Execute Ajax GET request on your servlet URL and execute the following function with Ajax response text...
                    $("#somediv").text(responseText);           // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
                });
            });
        </script>
    </head>
    <body>
        <button id="somebutton">press here</button>
        <div id="somediv"></div>
    </body>
</html>

字符串
使用doGet()方法创建一个servlet，如下所示：

@WebServlet("/yourServlet")
public class YourServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String text = "some text";

        response.setContentType("text/plain");  // Set content type of the response so that jQuery knows what it can expect.
        response.setCharacterEncoding("UTF-8"); // You want world domination, huh?
        response.getWriter().write(text);       // Write response body.
    }
}

型
显然，/yourServlet的URL模式可以自由选择，但是如果您更改它，则需要相应地更改yourServletURL JS变量中的/yourServlet字符串。
现在在浏览器中打开http：//localhost：8080/context/test.jsp并按下按钮，您将看到div的内容使用servlet响应进行更新。

将List<String>返回为JSON

使用JSON而不是纯文本作为响应格式，你甚至可以更进一步。它允许更多的动态。首先，你需要一个工具来在Java对象和JSON字符串之间进行转换。它们也有很多（参见this page的底部以获得概述）。我个人最喜欢的是Google Gson。
下面是一个将List<String>显示为<ul><li>的示例。servlet：

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<String> list = new ArrayList<>();
    list.add("item1");
    list.add("item2");
    list.add("item3");
    String json = new Gson().toJson(list);

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

型
JavaScript代码：

$(document).on("click", "#somebutton", function() {    // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get(yourServletURL, function(responseJson) {     // Execute Ajax GET request on your servlet URL and execute the following function with Ajax response JSON...
        const $ul = $("<ul>").appendTo($("#somediv")); // Create HTML <ul> element and append it to HTML DOM element with ID "somediv".
        $.each(responseJson, function(index, item) {   // Iterate over the JSON array.
            $("<li>").text(item).appendTo($ul);        // Create HTML <li> element, set its text content with currently iterated item and append it to the <ul>.
        });
    });
});

型
请注意，jQuery会自动将响应解析为JSON，并直接提供一个JSON对象（responseJson）作为函数参数。如果您忘记设置它或依赖默认值text/plain或text/html，则responseJson参数不会给予JSON对象，但是一个普通的字符串，之后您需要手动处理JSON.parse()，因此如果您首先正确设置了内容类型，那么这是完全不必要的。

将Map<String, String>返回为JSON

下面是另一个将Map<String, String>显示为<option>的示例：

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Map<String, String> options = new LinkedHashMap<>();
    options.put("value1", "label1");
    options.put("value2", "label2");
    options.put("value3", "label3");
    String json = new Gson().toJson(options);

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

型
JSP：

$(document).on("click", "#somebutton", function() {               // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get(yourServletURL, function(responseJson) {                // Execute Ajax GET request on your servlet URL and execute the following function with Ajax response JSON...
        const $select = $("#someselect");                         // Locate HTML DOM element with ID "someselect".
        $select.find("option").remove();                          // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
        $.each(responseJson, function(key, value) {               // Iterate over the JSON object.
            $("<option>").val(key).text(value).appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
        });
    });
});

型
与

<select id="someselect"></select>

型

将List<Entity>返回为JSON

下面是一个在<table>中显示List<Product>的示例，其中Product类具有Long id、String name和BigDecimal price属性。servlet：

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<Product> products = someProductService.list();
    String json = new Gson().toJson(products);

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

型
JS代码：

$(document).on("click", "#somebutton", function() {          // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get(yourServletURL, function(responseJson) {           // Execute Ajax GET request on your servlet URL and execute the following function with Ajax response JSON...
        const $table = $("<table>").appendTo($("#somediv")); // Create HTML <table> element and append it to HTML DOM element with ID "somediv".
        $.each(responseJson, function(index, product) {      // Iterate over the JSON array.
            $("<tr>").appendTo($table)                       // Create HTML <tr> element, set its text content with currently iterated item and append it to the <table>.
                .append($("<td>").text(product.id))          // Create HTML <td> element, set its text content with id of currently iterated product and append it to the <tr>.
                .append($("<td>").text(product.name))        // Create HTML <td> element, set its text content with name of currently iterated product and append it to the <tr>.
                .append($("<td>").text(product.price));      // Create HTML <td> element, set its text content with price of currently iterated product and append it to the <tr>.
        });
    });
});

型

以XML格式返回List<Entity>

这里有一个例子，它实际上和前面的例子一样，但是使用XML而不是JSON。当使用JSP作为XML输出生成器时，你会发现编写表格和所有内容都不那么繁琐。JSTL在这方面更有帮助，因为你可以使用它来重写结果并执行服务器端数据格式化。servlet：

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<Product> products = someProductService.list();

    request.setAttribute("products", products);
    request.getRequestDispatcher("/WEB-INF/xml/products.jsp").forward(request, response);
}

型
JSP代码（注意：如果您将<table>放在<jsp:include>中，则它可能在非Ajax响应中的其他地方可重用）：

<?xml version="1.0" encoding="UTF-8"?>
<%@page contentType="application/xml" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="jakarta.tags.core" %>
<%@taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<data>
    <table>
        <c:forEach items="${products}" var="product">
            <tr>
                <td>${product.id}</td>
                <td><c:out value="${product.name}" /></td>
                <td><fmt:formatNumber value="${product.price}" type="currency" currencyCode="USD" /></td>
            </tr>
        </c:forEach>
    </table>
</data>

型
JavaScript代码：

$(document).on("click", "#somebutton", function() {             // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get(yourServletURL, function(responseXml) {               // Execute Ajax GET request on your servlet URL and execute the following function with Ajax response XML...
        $("#somediv").html($(responseXml).find("data").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
    });
});

现在你可能已经意识到为什么XML比JSON强大得多，尤其是在使用Ajax更新HTML文档时。JSON很有趣，但毕竟通常只对所谓的“公共Web服务”有用。像JSF这样的MVC框架使用XML隐藏其神奇的魔力。

Ajaxifying现有表单

您可以使用jQuery $.serialize()轻松地对现有的POST表单进行ajaxify，而无需在收集和传递各个表单输入参数方面进行调整。假设现有表单在没有JavaScript/jQuery的情况下工作得很好（因此当最终用户禁用JavaScript时会优雅地降级）：

<form id="someform" action="${pageContext.request.contextPath}/yourServletURL" method="post">
    <input type="text" name="foo" />
    <input type="text" name="bar" />
    <input type="text" name="baz" />
    <input type="submit" name="submit" value="Submit" />
</form>

你可以用Ajax来逐步增强它，如下所示：

$(document).on("submit", "#someform", function(event) {
    const $form = $(this);

    $.post($form.attr("action"), $form.serialize(), function(response) {
        // ...
    });

    event.preventDefault(); // Important! Prevents submitting the form.
});

您可以在servlet中区分普通请求和Ajax请求，如下所示：

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String foo = request.getParameter("foo");
    String bar = request.getParameter("bar");
    String baz = request.getParameter("baz");

    boolean ajax = "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));

    // ...

    if (ajax) {
        // Handle Ajax (JSON or XML) response.
    } else {
        // Handle regular (JSP) response.
    }
}

jQuery Form plugin与上面的jQuery示例或多或少相同，但它对文件上传所需的multipart/form-data表单提供了额外的透明支持。

手动向servlet发送请求参数

如果你根本没有表单，只是想在后台与servlet交互，从而POST一些数据，那么你可以使用jQuery $.param()轻松地将JSON对象转换为URL编码的查询字符串，按照application/x-www-form-urlencoded内容类型，就像普通HTML表单所使用的那样，这样你就可以继续使用request.getParameter(name)提取数据。

const params = {
    foo: "fooValue",
    bar: "barValue",
    baz: "bazValue"
};

$.post(yourServletURL, $.param(params), function(response) {
    // ...
});

$.post()本质上是以下$.ajax()调用的简写。

$.ajax({
    type: "POST",
    url: yourServletURL,
    data: $.param(params),
    success: function(response) {
        // ...
    }
});

可以重用上一节中显示的相同doPost()方法。请注意，上述$.post()语法也适用于jQuery中的$.get()和servlet中的doGet()。

手动发送JSON对象到servlet

但是，如果出于某种原因，您打算将JSON对象作为一个整体而不是作为单个请求参数发送，则需要使用JSON.stringify()将其序列化为字符串（不是jQuery的一部分）并指示jQuery将请求内容类型设置为application/json而不是（默认）application/x-www-form-urlencoded。这不能通过$.post()便利函数完成，但需要通过$.ajax()完成，如下所示。

const data = {
    foo: "fooValue",
    bar: "barValue",
    baz: "bazValue"
};

$.ajax({
    type: "POST",
    url: yourServletURL,
    contentType: "application/json", // NOT dataType!
    data: JSON.stringify(data),
    success: function(response) {
        // ...
    }
});

请注意，很多初学者将contentType和dataType混合在一起。contentType表示requestbody的类型。dataType表示responsebody的（预期）类型，这通常是不必要的，因为jQuery已经根据response的Content-Type头部自动检测到它。
然后，为了处理servlet中的JSON对象（不是作为单个请求参数而是作为整个JSON字符串发送），您只需要使用JSON工具手动解析请求主体，而不是使用通常的getParameter()。也就是说，servlet不支持application/json的请求，但仅支持application/x-www-form-urlencoded或multipart/form-data的请求。Gson还支持将JSON字符串解析为JSON对象。

JsonObject data = new Gson().fromJson(request.getReader(), JsonObject.class);
String foo = data.get("foo").getAsString();
String bar = data.get("bar").getAsString();
String baz = data.get("baz").getAsString();
// ...

请注意，这一切都比只使用$.param()更笨拙。通常，只有当目标服务是例如JAX-RS（RESTful）服务时，您才希望使用JSON.stringify()，因为某些原因，该服务只能使用JSON字符串而不能使用常规请求参数。

从servlet发送重定向

重要的是要意识到和理解，servlet对Ajax请求的任何sendRedirect()和forward()调用都只会转发或重定向 * Ajax请求本身 *，而不是Ajax请求起源的主文档/窗口。在这种情况下，JavaScript/jQuery只会检索重定向的/如果它代表整个HTML页面，而不是特定于Ajax的XML或JSON响应，那么你所能做的就是用它替换当前文档。

document.open();
document.write(responseText);
document.close();

请注意，这并不会改变最终用户在浏览器地址栏中看到的URL。因此，书签功能存在问题。因此，最好只返回一个“指令”，让JavaScript/jQuery执行重定向，而不是返回重定向页面的全部内容。例如，通过返回布尔值或URL。

String redirectURL = "http://example.com";

Map<String, String> data = new HashMap<>();
data.put("redirect", redirectURL);
String json = new Gson().toJson(data);

response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
function(responseJson) {
    if (responseJson.redirect) {
        window.location = responseJson.redirect;
        return;
    }

    // ...
}

参见：

赞(0）分享  回复(0）举报  5个月前
a7qyws3x

a7qyws3x2#

更新当前显示在用户浏览器中的页面的正确方法（无需重新加载）是让浏览器中执行的一些代码更新页面的DOM。
这些代码通常是嵌入在HTML页面中或从HTML页面链接的JavaScript，因此建议使用Ajax（实际上，如果我们假设更新的文本通过HTTP请求来自服务器，这就是经典的Ajax）。
也可以使用浏览器插件或附加组件来实现这类功能，尽管插件访问浏览器的数据结构来更新DOM可能会很棘手。（本机代码插件通常会写入嵌入在页面中的某些图形框架。）

赞(0）分享  回复(0）举报  5个月前
fnatzsnv

fnatzsnv3#

我将向您展示一个servlet的完整示例以及如何进行Ajax调用。
在这里，我们将创建一个简单的示例，使用servlet创建登录表单。

文件 index.html

<form>
   Name:<input type="text" name="username"/><br/><br/>
   Password:<input type="password" name="userpass"/><br/><br/>
   <input type="button" value="login"/>
</form>

字符串

Ajax示例

$.ajax
({
    type: "POST",
    data: 'LoginServlet=' + name + '&name=' + type + '&pass=' + password,
    url: url,
    success:function(content)
    {
        $('#center').html(content);
    }
});

型

LoginServlet servlet代码：

package abc.servlet;

import java.io.File;

public class AuthenticationServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        doPost(request, response);
    }

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

        try{
            HttpSession session = request.getSession();
            String username = request.getParameter("name");
            String password = request.getParameter("pass");

            /// Your Code
            out.println("sucess / failer")
        }
        catch (Exception ex) {
            // System.err.println("Initial SessionFactory creation failed.");
            ex.printStackTrace();
            System.exit(0);
        }
    }
}

型

赞(0）分享  回复(0）举报  5个月前
ctehm74n

ctehm74n4#

$.ajax({
    type: "POST",
    url: "URL to hit on servelet",
    data: JSON.stringify(json),
    dataType: "json",
    success: function(response){
        // We have the response
        if(response.status == "SUCCESS"){
            $('#info').html("Info  has been added to the list successfully.<br>" +
            "The details are as follws: <br> Name: ");
        }
        else{
            $('#info').html("Sorry, there is some thing wrong with the data provided.");
        }
    },
    error: function(e){
        alert('Error: ' + e);
    }
});

字符串

赞(0）分享  回复(0）举报  5个月前
35g0bw71

35g0bw715#

Ajax（也称为AJAX）是Asynchronous JavaScript和XML的首字母缩写，是一组相互关联的Web开发技术，用于在客户端创建异步Web应用程序。使用Ajax，Web应用程序可以异步地向服务器发送数据，并从服务器检索数据。
下面是示例代码：
一个JSP页面JavaScript函数，用于将数据提交给具有两个变量firstName和lastName的servlet：

function onChangeSubmitCallWebServiceAJAX()
{
    createXmlHttpRequest();
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    xmlHttp.open("GET", "/AJAXServletCallSample/AjaxServlet?firstName="
    + firstName + "&lastName=" + lastName, true)
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.send(null);
}

字符串
Servlet读取数据并以XML格式发送回JSP（您也可以使用文本。您只需要将响应内容更改为文本并在JavaScript函数上呈现数据。）

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String firstName = request.getParameter("firstName");
    String lastName = request.getParameter("lastName");

    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");
    response.getWriter().write("<details>");
    response.getWriter().write("<firstName>" + firstName + "</firstName>");
    response.getWriter().write("<lastName>" + lastName + "</lastName>");
    response.getWriter().write("</details>");
}

型

赞(0）分享  回复(0）举报  5个月前
lyfkaqu1

lyfkaqu16#

通常情况下，你不能从servlet更新页面。客户端（浏览器）必须请求更新。客户端要么加载一个全新的页面，要么请求更新现有页面的一部分。这种技术称为Ajax。

赞(0）分享  回复(0）举报  5个月前
mf98qq94

mf98qq947#

使用Bootstrap多选择：

** AJAX **

function() { $.ajax({
    type: "get",
    url: "OperatorController",
    data: "input=" + $('#province').val(),
    success: function(msg) {
    var arrayOfObjects = eval(msg);
    $("#operators").multiselect('dataprovider',
    arrayOfObjects);
    // $('#output').append(obj);
    },
    dataType: 'text'
    });}
}

字符串

在Servlet中

request.getParameter("input")

型

赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com