加載 AJAX 調用返回的文檔

Question

我正在開發 Django 應用程序，但在使用 ajax 和 jQuery 時遇到了問題。

在我的頁面上，我有一個在單擊按鈕時調用的 javascript 函數。 此函數的目的是對 Django 視圖方法進行 ajax 調用。 在這個方法中，一些邏輯是使用一些隨 AJAX 調用發送的 POST 數據完成的，如果操作成功，我想返回到另一個頁面，否則，我只想讓用戶保持在同一頁面上，然后一個通知將使用 javascript 呈現給用戶。

下面是一段代碼：

（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 向用戶呈現響應頁面？

謝謝

Answer 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 片段。

Answer 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 片段並在當前文檔中工作，請嘗試以下操作：

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。

加載 AJAX 調用返回的文檔

問題描述

2 個解決方案

解決方案1
1 已采納 2012-12-01 02:59:18

解決方案2
1 2012-12-01 03:17:38

加載 AJAX 調用返回的文檔

問題描述

2 個解決方案

解決方案1 1 已采納 2012-12-01 02:59:18

解決方案2 1 2012-12-01 03:17:38

解決方案1
1 已采納 2012-12-01 02:59:18

解決方案2
1 2012-12-01 03:17:38