JQuery and AJAX - 页面刷新后获取Request

Question

我正在创建一个 AJAX 函数，它可以请求在数据库中插入一个新行，然后在客户端的浏览器 Web 中公开结果。所以我做了这个东西：

script.js

/* bla bla bla*/

function submitAjaxFunction() {

    var data = { /*some data*/ };

    $.ajax({
        type: "POST",
        url: "/*my url*/",
        data: data,
        success: function(response){
            /*add a new row in #results*/
        },
        error: function(e){
            /*things*/
        }
    });
}

/* bla bla bla*/

page.html

/* bla bla bla*/

<input type="button" value="Insert new Line">

/* bla bla bla*/

<table id="results">
    /* list of row in the database */
</table>

Logic.java

public class Logic extends AuthorizedAction {

    /* bla bla bla*/

    public ActionForward doAction(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {

        /* bla bla bla*/

        String result = null;

        /* things for fill result */

        response.setContentType("text/text;charset=utf-8");
        response.setHeader("cache-control", "no-cache");
        PrintWriter out = response.getWriter();
        out.println(result);
        out.flush();
        return null;
    }
}

问题在于插入新行（本质上是 Java 方法）背后的逻辑非常耗时。所以，我们可以有两种情况：

A) 等待的用户在逻辑结束之前不做任何事情：在这种情况下 "submitAjaxFunction" 工作完美并且它添加了新行而无需刷新页面;

B) 等待用户在逻辑结束前刷新页面：在这种情况下我们"lost"响应和函数"submitAjaxFunction"不能在#results 中添加新行。要查看新行，用户将不得不再次刷新页面；

第二种情况对我来说不是什么好事。是否刷新页面也能得到AJAX响应？

谢谢

Answer 1

如果你想在提交表单后立即做一些操作，我建议不要等到第一个请求完成后再发起第二个请求，而是在第一个请求中执行。

如果你需要根据某些参数发起第二个请求，那么也发送它们，第一个请求并在JAVA端

处理你的逻辑

Answer 2

我想您的 java 代码的响应是 html 字符串，而不是 Json 响应：如果你等待来自后端的一些值，你可以用 ajax.

来完成

<table id="results">

</table>

var data = { /*some data*/ };
$.ajax({
    type: "POST",
    url: "/*my url*/",
    data: data,
    success: function(response){
        // Refresh the whole table, not a good one, there's other powerful ways to do it. such as refresh only the affected row
        $("#results").replaceWith($("#results",response)); // or $("#results").html($("#results",response).html());

    },
    error: function(e){
        /*things*/
    }
});

如果后端没有要添加到 dom 的内容，只需将 table 附加到其他行

var html =  "<tr><td></td>....</td>";
$("#results tbody").append(html);

JQuery and AJAX - 页面刷新后获取Request

JQuery and AJAX - Get the Request after the page refresh

javascript

ajax

jquery

response