ajax无刷新模糊查询（json）

来源：互联网发布：中国外交有多阴险知乎编辑：程序博客网时间：2024/05/16 18:02

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/jquery-ui-1.10.4.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">thead th{width: 100px;text-align: center;}</style></head><body><label>姓名：</label><input type="text" id="username" /><label>备注：</label><input type="text" id="content" /><input type="button" id="send" value="点击" /><table><thead><tr><th>ID</th><th>姓名</th><th>备注</th></tr></thead><tbody id="tb"></tbody></table></body><script type="text/javascript">$(function() {$('#username').keyup(function() {var n=$(this).val();if(n!=''){$.ajax({type: "GET",url: "../data/text.json",data:{n:n},dataType: "json",success: function(data) {$("#tb").empty();                var str = "";                $.each(data,function(commendIndex,comment){                if(comment['username'].indexOf(n)>=0){                str +='<tr><th>'+comment['ID']+'</th><th>'+comment['username']+'</th><th>'+comment['content']+'</th></tr>';                }                });                $("#tb").append(str);}});}else{$("#tb").empty()}});});</script></html>

[{"ID":"1","username":"张三","content":"11111"},{"ID":"2","username":"李四","content":"22222"},{"ID":"3","username":"王五","content":"33333"},{"ID":"4","username":"王六","content":"44444"},{"ID":"5","username":"赵四","content":"55555"},{"ID":"6","username":"赵四四","content":"66666"}]

2 0