jQuery Ajax调用后重新加载页面 [英] Reload a page after jquery ajax call

问题描述

我有一个显示学生详细信息的jsp页面.基于更改事件下拉列表中学生的选择，将触发并检索学生的最小和最大分数.

<form name="listBean"> 
    <c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
        <input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialMarks"/> 
        <input type="number" name="nameList<c:out value='[${status.index}]'/>.finalMarks"/> 
        <input type="submit" value="submit" id="submit" />
        MinMarks:<c:out value="${Item.minMarks}"/></c:if> 
        MaxMarks:<c:out value="${Item.maxMarks}"/></c:if>
     </c:forEach>
</form>

检索后，更新的数据将存储到bean中.使用jquery.ajax()方法处理服务器请求

function onChange() {
    jQuery('form').each(function() {
        jQuery.ajax({
            url: "http://localhost:9001/submitStudent.do?requestType=auto",
            data: $('form').serialize(),
            type: 'POST'
          }); 
          location.reload();
    }); 
}

服务器响应成功后，我将重新加载页面，以便在ajax调用期间使用bean数据集刷新页面.

但是它没有显示数据吗?我在做什么错了?

还是有更好的解决方案来实现这一目标?

欢迎提出任何建议.

谢谢

解决方案

您似乎在发送 AJAX请求之后(可能在服务器收到并处理它之前)立即重新加载页面./p>

您可以将ajax请求存储在数组中，并且仅在所有请求都使用jquery的 when() .

function onChange() {
    var requests = [];

    jQuery('form').each(function() {
        requests.push(jQuery.ajax({
            url: "http://localhost:9001/submitStudent.do?requestType=auto",
            data: $('form').serialize(),
            type: 'POST'
        }));
    });

    jQuery.when.apply(jQuery, requests).then(location.reload, errHandler);
}

function errHandler (err) {
    // handle any errors
}

I have a jsp page which displays the details of a student .Based on the student selection from the dropdown box on change event will be fired and retrieve the min and max marks for the student.

<form name="listBean"> 
    <c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
        <input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialMarks"/> 
        <input type="number" name="nameList<c:out value='[${status.index}]'/>.finalMarks"/> 
        <input type="submit" value="submit" id="submit" />
        MinMarks:<c:out value="${Item.minMarks}"/></c:if> 
        MaxMarks:<c:out value="${Item.maxMarks}"/></c:if>
     </c:forEach>
</form>

After retrieval ,updated data will be stored into the bean.Server request is handled using jquery.ajax() method

function onChange() {
    jQuery('form').each(function() {
        jQuery.ajax({
            url: "http://localhost:9001/submitStudent.do?requestType=auto",
            data: $('form').serialize(),
            type: 'POST'
          }); 
          location.reload();
    }); 
}

Once the server response is successful , i will be reloading the page so that the page will be refreshed with the bean data set during the ajax call.

But it is not displaying the data?What i am doing wrong ?

Or is there any better solution to achieve this?

Any suggestions are welcome .

Thanks

解决方案

It looks like you are reloading the page immediately after sending the AJAX request, potentially before the server has received and processed it.

You could store your ajax requests in an array and only reload the page when all requests have completed using jquery's when().

function onChange() {
    var requests = [];

    jQuery('form').each(function() {
        requests.push(jQuery.ajax({
            url: "http://localhost:9001/submitStudent.do?requestType=auto",
            data: $('form').serialize(),
            type: 'POST'
        }));
    });

    jQuery.when.apply(jQuery, requests).then(location.reload, errHandler);
}

function errHandler (err) {
    // handle any errors
}

这篇关于jQuery Ajax调用后重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！