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

你的名字 2022-11-30 04:05 248阅读 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>密   码：</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.'"}';
    ?>

**实现效果**  
账号密码输入正确的时候  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center]  
输入错误的时候  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/9803ebc8ed404819bdb819406b77e406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/29be04b8842d4237819d8a3d7db9ced1.png