用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了。