jQuery發送帖子後，Ajax是否會自動刷新DOM？

我剛剛開始使用Ajax，並沒有完全失去......不知道它是如何工作的。jQuery發送帖子後，Ajax是否會自動刷新DOM？

我認爲Ajax發送（例如一個帖子）到服務器並返回x數據，但該數據會自動添加到DOM（無需重新加載頁面）。我有以下的jQuery AJAX腳本：

$.ajax({ 
    method: "POST", 
    url: "/url", 
    data: { 
     'varname': varname, 
     'varname2': varname2 
     // etc 
    } 
}); 

return false;

我剛剛學會（但不知何故，我已經期待這個......）那它返回什麼是內部的數據，它不是與瀏覽器（當前）DOM或HTML同步。我做了一個警報（數據），看到了全新的HTML編譯代碼：

}).done(function(data) { 
    alert(data); 
}); 

return false;

的問題是：我怎麼添加什麼，我需要從數據到目前的HTML。我的意思是，如果發送的變量觸發了一個新的腳本（並且生成了新內容），我該如何放置新內容，刷新或更新舊內容？

來源

2015-11-02 Chazy Chaz

這取決於您的html結構和ajax接收數據的結構，您必須閱讀並解釋數據，然後通過jQuery或JavaScript將其插入到所需的站點元素 – Fanax

查看'$ .load'到「自動更新DOM「，而無需自己處理結果：http://api.jquery.com/load/ –

所以我只是用'$（」#div「）.load（」/ url「）;'？我在哪裏指定變量？ –

的解決方案是非常簡單的：採取什麼樣的我需要並打印它：

}).done(function(data) { 
     var new_content = $(data).find('#search'); 
     $('#search').html(new_content); 
    });

感謝您的回答。

來源

2015-11-02 14:26:59

而不是使用.done 您可以使用上面的代碼編輯代碼

$.ajax({ 
method: "POST", 
url: "/url", 
data: JSON.stringify({ 
    'varname': varname, 
    'varname2': varname2 
    //etc 
}), 
dataType: "json", 
contentType : "application/json;charset=utf-8", // so that your ajax call will automatically convert the data returned from the server as json. 
success: function(response){ 
    // do your job here. You may change DOMs, manipulate data to client. 
} 
});

的，你可以將數據從服務器返回的順利。

來源

2015-11-02 11:56:18 n00bster

這是使用'.done'的舊方法（即'.done'是使用'.success'的新方法）。否則它們是相同的。這是如何回答這個問題的？ –

不，您的腳本必須處理來自服務器的響應並決定如何處理它。

如果你想插入從您的AJAX請求返回的HTML並將其插入intto的DOM /頁，那麼你可以考慮功能，如html，append和insertAfter做到這一點。

一個例子可能是這樣的：

}).done(function(data) { 
    $('#someContainerId').html(data); 
});

來源

2015-11-02 11:56:53

阿賈克斯只是給做一個HTTP請求，從JavaScript，而無需加載新頁面的過程中的一個術語。

我剛剛得知（但不知何故，我已經期待這個...），它返回的是內部數據，它不會與瀏覽器（當前）DOM或html同步。

正確。數據可用於JavaScript，以便您的代碼可以隨心所欲地執行任何操作。

問題是：我應該如何添加我需要從數據到目前的HTML。

DOM操縱。

jQuery提供了很多幫助的方法，包括replaceWith和append。

來源

2015-11-02 11:58:18 Quentin

嘿謝謝你的回答，我在這裏看看如何使它工作。我能夠改進和簡化我的php腳本，但關於ajax我只能想到像'$（「html」）.html（data）;'它實際上「工作」，但它打破了頁眉和頁腳javascripts（其實所有的js都不知道爲什麼）。我只需要從'data'拿一個div容器，但我不知道如何。你可以幫我嗎？ –

@ChazyChaz - 你應該只從你的服務器中取出你想要替換的數據，然後替換它，而不是整個文檔。否則，你可能不會使用Ajax。 – Quentin

好吧，我剛剛找到'filter'和'find'。我會嘗試。 –

首先，您必須設置請求的頁面（url）以僅回覆您需要的數據（例如，您可能不需要整個網頁在<html>和</html>之間。

在PHP文件的開始使用

if(!empty($_POST['PASSED_VARIABLE'])) { 
    ... 
    // Manipulate the data. 
    ... 

    echo $data; // Echo the result. 
}

當你的Ajax功能完成後，就可以接收到的數據插入到DOM：

.done(function(data) { 
    $('div#results').html(data); // Or any other DOM manipulation. 
})

來源

2015-11-02 11:59:02 Justas

是否添加'$（'div＃results'）。html（data）;'會用新內容更新頁面？爲什麼我需要php代碼？ –

你可以定義你期望實現什麼？你想完全改變你的頁面或頁面的一部分嗎？ – Justas

我想發送一些變量來觸發腳本並生成內容，然後我需要在不重新加載頁面的情況下進行打印。 –

jQuery發送帖子後，Ajax是否會自動刷新DOM？

回答

相關問題