在搜索框输入关键字
异步提交给后台
后台返回json数组
客户端解析json生成dom
客户端异步代码实现：
function getMoreContents()//获得用户关键字相关联的函数其实就是异步处理函数
{
var content=document.getElementById("keyword");
if(content.value="")
{
return;
}
xmlHttp=createxmlHttpRequest;
var url="index.jsp?keyword"+escape(content.value);
xnlHttp.open("GET",url,true);
//回调函数
xmlHttp.onreadyStateChange=callback;
xmlHttp.send(null);
}
//回调函数
function callback()
{
if(xmlHttp.readyState==4){
if(xmlHttp.readyState==200){
var result=xmlHttp.responseText;
//解析获得数据
var json=JSON.parse(result);//js对象
JSON.parse()会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
而eval()则可以解析任何字符串，eval是不安全的。
比如下面的字符串：
var str = 'alert(1000.toString())';
eval(str);
JSON.parse(str);
用eval可以解析，并且会弹出对话框，而用JSON.parse()则解析不了。
其实alert并没有什么坏处，可怕的是如果用恶意用户在json字符串中注入了向页面插入木马链接的脚本，用eval也是可以操作的，而用JSON.parse()则不必担心这个问题。
}
}
}
//然后要给服务器端发送数据 ajax异步发送数据 原生js实现
//创建xmlHttp对象
function createxmlHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
//显示内容
function setContext(json)
{
$.each(json,function(index,value){
var li="<li>"
li+=value+"</li>";
$("ul").append(li);
});
}
服务器端：
//获得关键字返回数组
//匹配的数据在哪里？？？我是自己写的一个数组
public List<String> getDate(String key)
{
List<String> list=new ArrayList<string>();
for(String data:datas){
if(data.contains(keyword)){
list.add(data);
}
}
return data;
}
Gson gson=new Gson();
String json=gson.toJson(data);
response.getWriler().writer(json.toString());
作者： qq_fighting_283709032
链接：https://www.imooc.com/article/21821
来源：慕课网