Question

我有一个简单的Web应用程序，它使用API从数据库返回搜索结果，并使用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请求。将数据发布到您的服务器然后获取结果并将其返回到您的javascript，然后直接进入您的网页。使用 request.responseText 将/插入到相应的字段

Answer 4

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

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

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

在Web应用程序中重新搜索搜索结果（不使用jQuery）

4 个答案: