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）等待用户在逻辑结束之前刷新页面：在这种情况下，我们“丢失”了响应，而“submitAjaxFunction”函数无法在#results中添加新行。要查看新行，用户必须再次刷新页面;

第二种情况对我没什么好处。即使页面被刷新，是否可以获得AJAX响应？

由于

Answer 1

如果您在表单提交后立即想要执行某些操作，我建议不要等待第一个请求完成，然后启动第二个请求，而不是在第一个请求中执行。

如果你需要根据一些参数启动第二个请求，那么也可以发送它们，第一个请求并在JAVA端处理你的逻辑

Answer 2

我想你的java代码的响应是html字符串，而不是Json Response：如果等待后端的某些值，可以使用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中，只需将表附加到其他行

即可

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

JQuery和AJAX - 在页面刷新后获取请求

2 个答案: