加载 AJAX 调用返回的文档答案

【问题标题】：Load document returned by AJAX Call加载 AJAX 调用返回的文档
【发布时间】：2012-11-19 06:54:55
【问题描述】：

我正在开发一个 Django 应用程序，但我遇到了 ajax 和 jQuery 问题。

在我的页面上，我有一个在单击按钮时调用的 javascript 函数。这个函数的目的是做一个ajax 调用 django 视图方法。在这种方法中，一些逻辑是使用通过 AJAX 调用发送的一些 POST 数据完成的，如果操作成功，我想返回另一个页面，否则，我只是希望用户留在同一页面上，并且会使用 javascript 向用户显示通知。

下面是一段sn-p代码：

(Javascript)

function makeCall() {

    $.post(url, data, function(data) {

          if(data=="ERROR") {

             alert("THERE WAS AN ERROR");

          } else {

             //send user to a new page. 
          }
    });
}

(Django-Python)

def viewMethod(request):

   //LOGIC...  Renders page using POST data.

    if success:

        //... preparing the response.

        return HttpResponse(t.render(c))
    else:

        return HttpResponse("ERROR", content_type="text/plain")

在操作成功的情况下，如何使用javascript/jQuery将响应页面呈现给用户？

谢谢

【问题讨论】：

window.location.href =
抱歉，我在原始问题中遗漏了一些细节，现在已更新。这不起作用，因为页面是使用在 AJAX 调用中发送的一些 POST 数据生成的。该方法返回一个完整的 html 文档，而不仅仅是一个 url。我知道使用 GET 我可以返回一个带有必要参数的 url 字符串来生成页面，但对于这种情况，我必须使用 POST。不过谢谢。

标签： javascript jquery python django document

【解决方案1】：

在 viewMethod 中，你可以使用 POST 数据渲染页面，但不能渲染整个页面，也就是说，你要响应的页面只有 body 标签而不是 head。

if success:
    return HttpResponse('<body><p>SUCCESS</p></body>')

在前端

$.post(url, data, function(data) {

      if(data=="ERROR") {

         alert("THERE WAS AN ERROR");

      } else {

         $('tip').append(data)
      }
});

如果你仍然使用整个页面，它的形式是这样的：，你可以使用 window.open 或 iframe 标签来处理它。但我建议只响应一些 html 的 sn-ps。

【讨论】：

【解决方案2】：

除非 Django 有一些特殊性，否则应该没有什么可以阻止 POST 请求与 GET 请求的行为不同。两者都应该能够返回一个 URL 字符串。

如果您希望接收 URL 并替换当前文档，请尝试以下操作：

function makeCall(url, data) {
    function newPageError(jqXHR, textStatus, errorThrown) {
        alert(textStatus + ' : ' + errorThrown);
    }
    $.post(url, data).success(function(data, textStatus, jqXHR) {
        if(!data.match(/^http/)) {
            newPageError(jqXHR, data, textStatus + ' - but error indicated');
        } else {
            location.href = data;
            //location.replace(data);//alternative; gives different Back button behaviour
        }
    }).fail(newPageError);
}

或者，如果您希望接收 HTML sn-p 并在当前文档中工作，请尝试以下操作：

function makeCall(url, data) {
    function newPageError(jqXHR, textStatus, errorThrown) {
        alert(textStatus + ' : ' + errorThrown);
    }
    $.post(url, data).success(function(data, textStatus, jqXHR) {
        if(data.toUpperCase() == 'ERROR') {
            newPageError(jqXHR, 'ERROR', textStatus + ' - but error indicated');
        } else {
            $("#myDiv").html(data); //change jQuery selector to suit
        }
    }).fail(newPageError);
}

注意事项：

在这两种情况下，都会处理两种类型的错误；成功响应中指示的错误，以及总的 HTTP 错误（例如内部服务器错误）。
在这两种情况下，都假定将 URL url 和查询参数 data 传递给函数。
在第一种情况下，需要修改服务器端脚本以返回 URL。

【讨论】：