重新加载 div 而不重新加载整个页面

Question

我知道这个问题已经被问了一百万次，但我找不到适合我的答案。

当我从下拉菜单列表中选择一个选项时，我想附加我正确执行的 URL 的末尾。然后我想在我的输入字段中显示从我的下拉列表中选择的主题，但唯一显示的是我输入的字母。唯一一次完整的主题显示是在我刷新整个页面但我不想刷新整个页面我只想刷新 div 之后。就像在reddit上一样。谁能帮我 ？我在下面尝试过：

create_subtopic.php：

<div class="search_topics">
    
    <input type="text" name="q" placeholder="Choose Topic" id="search_topics_input"
        value="<?php echo $topic_toget; ?>" autocomplete="off">

$("#search_topics_input").load("create_subtopic.php");

后端搜索.php：

echo "<div class='results_div' onclick='addUrl()'>

function addUrl() {
        var url = window.history.pushState( {}, '', '?topic_toget=<?php echo $topic_name; ?>' );
        //$( "#search_topics_input" ).load(window.location.href + " .search_topics" );
        //$(".search_topics").load(" #search_topics_input > *");
        //$("#topic_name").load("#search_topics_input");
        $("#search_topics_input").load("backend-search.php");
}

所有注释掉的都是我尝试过的，还有更多。

Answer 1

带有链接下拉菜单：

链接应该是按钮：

<button class="btn btn-link" type="button" onclick="updateDiv('1')">Dropdown Item 1</button>
<button class="btn btn-link" type="button" onclick="updateDiv('2')">Dropdown Item 2</button>
<button class="btn btn-link" type="button" onclick="updateDiv('3')">Dropdown Item 3</button>

带选择输入

您可以使用 onchange 属性调用 updateDiv 函数：

<select id="div-changer" onchange="updateDiv()">
    <option value="1">Dropdown Item 1</option>
    <option value="2">Dropdown Item 2</option>
    <option value="3">Dropdown Item 3</option>
</select>

在 updateDiv 函数中

首先，您想获得价值。在带有按钮的版本中，您只需使用函数参数：

function updateDiv(id) {

}

在选择版本中有点复杂：

function updateDiv() {
    let id = document.querySelector('#div-changer').options[document.querySelector('#div-changer').selectedIndex].value;
}

然后你用 id 作为参数执行 XMLHttpRequest。您可以在 php.ini 中将其与 $_POST['id'] 一起使用。您也可以将所有内容命名为“主题”，而不是使用 1、2、3 作为价值，而是使用政治、体育和科学。 XMLHttpRequest 的工作方式如下：

var r = new XMLHttpRequest();
r.open("POST", "/include/your-ajax.inc.php", true);
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
r.onreadystatechange = function () {
    if (r.readyState != 4 || r.status != 200) return;
    
    // process response here
};
r.send('id=' + id);

在 onreadystatechange 函数中，您使用 r.responseText。它是服务器返回的。例如，您可以制作一个带有内容 id 的 div，然后将 innerHTML 设置为 responseText。如果这就是您想要做的，服务器必须返回适当的 HTML。例如，如果您有一个简单的网站，在服务器上没有任何查询，您可以制作 3 个文档（站点）并将它们返回给客户端。 onreadystatechange函数内部：

if (r.readyState != 4 || r.status != 200) return;

document.querySelector('#content').innerHTML = r.responseText;

服务器端：

在这个例子中，我只返回一个字符串。首先检查 id 参数是否为空。然后根据内容回显一些内容：

<?php

if (!isset($_POST['id']) || strlen($_POST['id'])) {
    echo 'err';
    exit();
}

if ($_POST['id'] == '1') {
    echo '<h2>Post Number 1</h2><p>Lorem Ipsum...</p>';
    exit();
} else if ($_POST['id'] == '2') {
    echo '<h2>Post Number 2</h2><p>Lorem Ipsum...</p>';
    exit();
} else if ($_POST['id'] == '3') {
    echo '<h2>Post Number 3</h2><p>Lorem Ipsum...</p>';
    exit();
} else {
    echo 'postNotFound';
    exit();
}

onreadystatechange 中的错误检查

然后您可以将错误捕获添加到 onreadystatechange 函数。您必须在设置内容 innerHTML 之前和检查 readyState 之后放置它：

if (r.responseText == 'err' || r.responseText == 'postNotFound') {
    console.log('AJAX error');
    return;
}

我没有测试代码。有什么错误可以追问。