最简单的js异步查询功能

最新推荐文章于 2022-12-28 08:40:35 发布

moye666

最新推荐文章于 2022-12-28 08:40:35 发布

阅读量1.8k

点赞数 1

文章标签： js 异步 javascript

本文链接：https://blog.csdn.net/moye666/article/details/70154997

版权

就是最简单的异步查询，，，先甩代码

               <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<input id="value" placeholder="请输入需要查询的关键字">
		 <input id="doSearch" type="button" value="查询" οnclick="submit()">
	<div id=show>	
	</div>
</body>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var submit = function(){
    	var value = $("#value").val();
    	$("#show").empty()
    	$.post("#(BASE_PATH)/bbs/doSearch",{"value":value},function(data){
			for (var i = 0; i < data.length; i++) { 
	               $("#show").append("bbsName:"+data[i].bbsName+"<br>"
	                                   +"bbsType:"+data[i].bbsName+"<br>"
	                                   +"bbsContent:"+data[i].bbsContent+"<br>"
	                                   +"userName:"+data[i].userName);
                   
	             }  
		})
    }
    
	</script>
</html>

这是前台页面，，，灰常简单吧

<input id="value" placeholder="请输入需要查询的关键字">
		 <input id="doSearch" type="button" value="查询" οnclick="submit()">

查询框 id="xxx",这个属性会在下面的js中调用

var value = $("#value").val();拿到输入框里面的值

下面这句是把这个值传到后台

$.post("#(BASE_PATH)/bbs/doSearch",{"value":value},function(data)

#(BASE_PATH)/bbs/doSearch //这一句就是找到你的这个查询所需要用到的方法

//下面则是循环遍历查询到的结果，，，没问题吧

for (var i = 0; i < data.length; i++) { 
	               $("#show").append("bbsName:"+data[i].bbsName+"<br>"
	                                   +"bbsType:"+data[i].bbsName+"<br>"
	                                   +"bbsContent:"+data[i].bbsContent+"<br>"
	                                   +"userName:"+data[i].userName);
                   
	             }  

<div id=show>//这句话就是你想要的查询结果输出地

$("#show").empty() // 猜猜这个是干什么的？

//好了，下一次我打算说说分页差查询结果