利用ajax实现和后台交互的模糊搜索
Posted TigerZhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用ajax实现和后台交互的模糊搜索相关的知识，希望对你有一定的参考价值。
<!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"
}
]
以上是关于利用ajax实现和后台交互的模糊搜索的主要内容，如果未能解决你的问题，请参考以下文章