$.ajax的写法，jq与ajax实现异步刷新，实例：对搜索框进行模糊查询，并且将查询结果显示在jsp页面上

jq实现ajax的写法

$.ajax({
	url:"",//要请求的url地址
	dataType:"json",//返回格式为json
	async:"true,//请求是否同步，默认是异步即（true）
	data:{"key":"value"},//要传递到请求url地址的键值对。
	type:"post",////type：指明请求方式 POST或GET 默认GET，当请求方式为get是，data的数据可以直接拼在url后面
	beforeSend:function(){
		//请求前的处理
	},
	success:function(){
		//请求成功后的处理
	},
	complete:function(){
		//请求完成后的处理
	},
	error:function(){
		//请求出错时的处理
	}
});

例子
模糊查询
这里是获取input中的value的值，然后通过onclick()事件去servlet中获取相应的内容，并讲内容显示在前端，

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@	taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查询</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript">
	function getCilck(){
		$.ajax({
			url:"/WebStudent/student/dosearch?sname="+ $(".search_txt").val(),
			dataType:"json",
			success:function(data){
				$.each(data,function(i,obj){
					$(".stulist").append("<tr><td>"+obj.sno+"</td><td>"+obj.sname+"</td><td>"+obj.sex+"</td><td>"+obj.address+"</td></tr>");
				});					
			}
		});
	}
 </script>
<style>
* {
	margin: 0;
	padding: 0;
}

.main {
	margin-top: 50px;
	width: 80%;
	margin-left: 10%;
	border: 0px #DFDFDF solid;
	text-align: center;
}

table, th, td {
	border: 1px #46BCAF solid;
}

.btn {
	display: inline-block;
	height: 30px;
	background-color: #EEEEEE;
	text-decoration: none;
	line-height: 30px;
	color: #000;
}

.btn:hover {
	background-color: #46BCAF;
	color: #fff;
}

table {
	border-collapse: collapse;
	width: 90%;
	margin-left: 5%;
}

table .btn {
	width: 70px;
}

.addDiv {
	text-align: left;
	width: 90%;
	margin-left: 5%;
	margin-bottom: 30px;
}

.addDiv a {
	width: 100px;
	text-align: center;
}

.search_txt {
	display: inline-block;
	height: 30px;
	margin-left: 30%;
}

.search_btn {
	display: inline-block;
	height: 30px;
	width: 70px;
	background-color: #EEEEEE;
	text-decoration: none;
	line-height: 30px;
	color: #000;
	border: none;
	outline: medium;
}

.search_btn:hover {
	background-color: #46BCAF;
	color: #fff;
}
.top {
	width: 100%;
	border: 0px solid red;
	height: 1%;
	font-size: 14px;
	color: red;
}
</style>
</head>
<body>
	<div class="main">
		<div class="top">
			<c:if test="${param.info==1 }">
				<span>没有该信息</span>
			</c:if>
		</div>
		<div class="addDiv">
			<input type="text" class="search_txt" name="sname" placeholder="请输入想要查找的内容"> 
			<input type="button"class="search_btn" value="搜索"  onclick = "getCilck()">
		</div>

		<table class = "stulist">
			<tr>
            	<th>学号</th>
           		<th>姓名</th>
            	<th>性别</th>
            	<th>地址</th>
        	</tr>
		</table>
	</div>
</body>
</html>

HadwinLing

发布了85 篇原创文章 · 获赞 13 · 访问量 9115

私信关注

$.ajax的写法，jq与ajax实现异步刷新，实例：对搜索框进行模糊查询，并且将查询结果显示在jsp页面上

猜你喜欢