在 Web 应用程序中重新加载新搜索的搜索结果（没有 jQuery）

Question

我有一个简单的网络应用程序，它使用 API 到 return 从数据库中搜索结果，并使用 ajax 将它们插入到页面上的空 ul 元素中。（跨域请求使用 JSONP）

我不知道如何使用 javascript，我发现到处都使用 jQuery。我希望能够让他们输入另一个搜索词并清除页面中的现有内容。

目前，如果您进行第二次搜索，它只会将新结果附加到现有列表的底部。

Answer 1

一旦您获得内容（使用 AJAX 从您的 API 调用返回），您就可以将其分配给您的 ul 或 div，例如document.getElementById('YourULID').innerHTML = "The content you got from your AJAX call"

Answer 2

来自vanilla.js（所以你可以compare with jQuery）：

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

Answer 3

如果我明白你想要什么。您想要从服务器获取结果并将它们插入网页的 ul 表单字段中。这只是一个示例，可能会有所帮助

function createRequest(){
    try{
       request = new XMLHttpRequest(); 
    }catch (tryMS){
        try{
            request = new ActivXObject("Msxml2.XMLHTTP");
        }catch (otherMS){
            try{
                request = new ActivXObject("Microsoft.XMLHTTP");
            }catch (failed){
                request = null;
            }
        }
    }
    return request;
}

function loggin(user_id,password){
    request = createRequest();
    data = new FormData();
    data.append('user_id',user_id.value);
    data.append('password',password.value);
    request.onreadystatechange=function(){
        if(request == null){
            alert('Unable to connect');
        }else{
            if(request.readyState==4){
                if(request.status==200){
                    if(request.responseText){
                        document.location.href = request.responseText;
                    }
                }
            }
        }
    }

这将创建 HTTP 请求。 Post 数据到您的服务器，然后获取结果并将其返回到您的 javascript，然后直接转到您的网页。使用request.responseText到append/insert到相应的字段

Answer 4

当搜索字段出现 onsubmit 时，我通过使用几行简单的 html 解决了这个问题：

var div = document.getElementById('cart_item');

while(div.firstChild){
    div.removeChild(div.firstChild);
}

在 Web 应用程序中重新加载新搜索的搜索结果（没有 jQuery）

Reload search results on new search in web application (without jQuery)

html

javascript

api

ajax