用jquery就要先引入jquery文件
jquery中的ajax格式:
$.ajax({
url:'請求地址',
type:'請求的方式',
data:'要求發送給服務器的值',
dataType:'要求服務器返回的數據類型',
async:'請求是否異步',
success:function(response){
成功的回調函數
},
error:失敗的回調函數
});
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> </head> <body> <form action=""> Username:<input type="text" name="userName" id="userName"> Password:<input type="password" name="userPwd" id="userPwd"> <input type="button" value="登錄" id="btnLogin"> </form> </body> </html>
js代碼
<script> $("#btnLogin").click(function(){ var name=$("#userName").val(); var pwd=$("#userPwd").val(); console.log(name,pwd); $.ajax({ url:'check.php', type:'post', data:{'name':name,'pwd':pwd}, dataType:'json', success:function(data){ if(data.flag==1){
alert(data.msg); location.href='index.php'; }else{ alert(data.msg); } }, error:function(){ console.log('請求出錯!'); } }) }); </script>
后台文件(check.php)
<?php $data=$_POST; $flag=0; if($data['name']=='admin'&&$data['pwd']=='123') { $flag=1; $msg="login success"; }else{ $msg="please login again"; } $respose=[ 'flag'=>$flag, 'msg'=>$msg, ]; echo json_encode($respose);
效果:
注意:
前台與后台之間是通過json格式來進行傳遞數據的,相當於json是中間的橋梁,json的載體是字符串,所以它是以字符串的形式進行傳遞的。
若php文件想要給前台傳遞數據必須先使用json_encode()函數對數據進行編碼轉化成json格式,若后台接收到json格式的數據,就要使用json_decode()方法進行解碼,轉化成對象的形式。
前台想要獲取后台傳過來的數據,以js為例(不使用jquery的情況下),使用JSON.parse()方法對接受過來的json數據進行格式轉化,轉化成對象形式;若使用jquery,按照jquery的規則寫即可。
在使用jquery封裝ajax時,如果后台返回的數據類型不是json的,而我們在ajax里面指定的dataType類型是json的,數據類型不一致就會導致出現進入error的問題,只要返回的類型和ajax指定類型一致就ok了。