$.ajax()实现ajax语法格式及完整案例

最新推荐文章于 2024-08-09 17:26:52 发布

念你那丝微笑

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量3.6k

点赞数

分类专栏： Ajax技术学习文章标签： ajax jquery

本文链接：https://blog.csdn.net/pig_pig32/article/details/108177730

版权

Ajax技术学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

$.ajax()代码模板

jQuery实现ajax语法为：$.ajax({})，其中{}为对象，对象里面的key键是固定的，比如:

1、type: 表示请求方式，一般为post或get
2、url表示请求的地址
3、contentType表示发送信息至服务器时内容编码类型
4、data表示发送到服务器的数据
5、dataType表示预期服务器返回数据的类型如：text，json，xml等等类型
6、success表示请求成功后的回调函数
7、error自动判断 (xml 或 html)。请求失败时调用此函数，等等
例如

				$.ajax({
					//请求方式
					type:"post",
					//请求地址
					url:"02ajax.php",
					//发送信息至服务器时内容编码类型
					contentType: 'application/x-www-form-urlencoded;charset=utf-8',  
					//传递的数据
					data:{username:username,password:password},
					//预期服务器返回数据的类型如：text，json，xml等等
					dataType:"json",
					//请求成功
					success:function(data){
					console.log(data);
					},
					//请求失败，打印错误信息。
					error : function(e){
						console.log(e.status);
						console.log(e.responseText);
					}
				})

$.ajax()验证登录案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现ajax</title>
		<style type="text/css">
			.login{
				margin: 100px;
			}
			#info{
				width: 240px;
				background-color:orange;
				display: none;
				overflow: hidden;
			}
			#btn{
				width:100px;
				font-weight: bold;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div class="login">
			<table border="0" cellspacing="10px" cellpadding="">
				<tr>
					<td colspan="2">
						<p id="info"></p>
					</td>
				</tr>
				<tr>
					<th>用户名：</th>
					<td>
						<input type="text" name="" id="username"/>
					</td>
				</tr>
				
				<tr>
					<th>密&nbsp;&nbsp;&nbsp;码：</th>
					<td>
						<input type="text" name="" id="password" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" id="btn" value="登录"/>
					</td>
				</tr>
			</table>
		</div>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			
			$("#btn").click(function(){
				var username=$("#username").val();
				var password=$("#password").val();
				$.ajax({
					//请求方式
					type:"post",
					//请求地址
					url:"02ajax.php",
					//传递的数据
					data:{username:username,password:password},
					//预期服务器返回数据的类型如：text，json，xml等等
					dataType:"json",
					//请求成功
					success:function(data){
					var info=$("#info");
					info.css("display","block");
					//前面的dataType:"json",已经把json格式转化为js对象，所以可以直接调用对象来获取后端传过来的值
					info.html("提示:"+data.tips);
					//定时器过4秒隐藏提示信息
					setTimeout(function(){
						info.style.display="none";
					},4000)
					},
					//请求失败，打印错误信息。
					error : function(e){
						console.log(e.status);
						console.log(e.responseText);
					}
				})
			});
		})
	</script>
	</body>
</html>

PHP后端响应代码

<?php
//判断请求方式
if(!empty($_POST)){
$uname=$_POST[username];
$pw=$_POST[password];
}
else{
	$uname=$_GET[username];
	$pw=$_GET[password];
}
$tips='';
if($uname=="123"&&$pw=="456"){
	$tips="登录成功，正在跳转，请稍等...";
}
else{
	$tips="用户名或密码错误";
}
//将数据封装成json格式传给$.ajax()的success方法
echo '{"username":"'.$uname.'","password":"'.$pw.'","tips":"'.$tips.'"}';
?>