Question

这是我的Html。输出将是str。

<div id="response_container"> 
     //str 
</div>

这是javascript

const form = document.getElementById('search_form');
const htmlcontainer = document.getElementById('response_container');
    form.addEventListener('submit', function()
    {
        console.log("Inside sendQuery()");
        var to_search = document.querySelector('#item_to_search').value;
        var xmlObject = createObject();
        console.log(xmlObject);
        xmlObject.open("GET", "getData.php?search="+ to_search +"&srch_submit=search");
        xmlObject.send(null);
        xmlObject.onreadystatechange = function(){
            if(xmlObject.readyState == 4 && xmlObject.status == 200)
            {
                var doc = xmlObject.responseXML;
                var child = doc.documentElement;
                var content = child.firstChild.data;
                console.log(content);
                var arr = JSON.parse(content);

                for(var i = 0; i < arr.length ; i++)
                {
                    str = "<br><span>Name: "+ arr[i][0] +" Roll No: "+ arr[i][1] +"</span>";
                    htmlcontainer.insertAdjacentHTML('afterbegin', str);
                    /*htmlcontainer.innerHTML = str;*/

                }
                /*htmlcontainer.insertAdjacentHTML('afterend', content);*/

            }
            else
            {

            }

        }

此ajax代码与另一个php文件一起使用，并返回数据库中与输入的字符串匹配的所有名称。但是这个名称不会出现在id="response_container"的div中。我尝试在调试器中暂停程序，并发现至于循环继续，所有名称确实显示在但在eventListener完成其工作后消失。请帮忙。有什么方法可以解决这个问题吗？我想要名字。谢谢你

Answer 1

阻止浏览器默认表单提交过程

更改

form.addEventListener('submit', function() {

要

form.addEventListener('submit', function(event) {
   event.preventDefault();
   // other code is same

Answer 2

您需要阻止表单提交＆＃39;这基本上是因为页面重新加载而消灭你的div。

form.addEventListener('submit', function(e) {
    e.preventDefault();
    //....
}

eventListener函数完成后，<div>的内容将丢失

2 个答案: