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