jquery中的ajax(用户登录)


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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM