在現(xiàn)代網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)使用Ajax技術(shù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)查詢并將結(jié)果顯示在頁(yè)面上。Ajax（Asynchronous JavaScript and XML）是一種前端技術(shù)，能夠?qū)崿F(xiàn)異步加載數(shù)據(jù)，而不必刷新整個(gè)頁(yè)面。本文將介紹如何使用Ajax查詢并展示文章內(nèi)容。我們將使用一個(gè)簡(jiǎn)單的示例來(lái)說(shuō)明這個(gè)過(guò)程。
假設(shè)我們有一個(gè)博客網(wǎng)站，頁(yè)面上有一個(gè)搜索框，用戶可以在搜索框中輸入關(guān)鍵詞，然后通過(guò)Ajax查詢相應(yīng)的文章，并將結(jié)果顯示在頁(yè)面上。
首先，我們需要在頁(yè)面上添加一個(gè)搜索框和一個(gè)用于顯示結(jié)果的容器。搜索框的HTML代碼如下：
<input type="text" id="keyword" placeholder="請(qǐng)輸入關(guān)鍵詞"> <button id="search-btn">搜索</button>在這個(gè)示例中，我們使用了一個(gè)`input`元素用于輸入關(guān)鍵詞，并為它設(shè)置了一個(gè)`id`屬性為"keyword"。我們還使用了一個(gè)`button`元素，并為它設(shè)置了一個(gè)`id`屬性為"search-btn"。 接下來(lái)，我們需要使用Ajax來(lái)實(shí)現(xiàn)查詢功能。我們可以使用JavaScript的`XMLHttpRequest`對(duì)象來(lái)發(fā)送異步請(qǐng)求，并處理返回的結(jié)果。下面是查詢文章的JavaScript代碼：
var searchBtn = document.getElementById('search-btn');
searchBtn.addEventListener('click', function() {
var keyword = document.getElementById('keyword').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var articles = JSON.parse(xhr.responseText); // 假設(shè)返回的數(shù)據(jù)是一個(gè)包含文章信息的JSON數(shù)組
displayArticles(articles);
} else {
console.error('請(qǐng)求失敗');
}
}
};
xhr.open('GET', '/search?keyword=' + keyword);
xhr.send();
});
function displayArticles(articles) {
var container = document.getElementById('results');
container.innerHTML = ''; // 清空容器中的內(nèi)容
articles.forEach(function(article) {
var articleElement = document.createElement('p');
articleElement.textContent = article.title;
container.appendChild(articleElement);
});
}