Ajax 初始---ajax php 登录

 ajax： 局部刷新   页面；异步请求数据

同步：阻塞

异步：非阻塞

iquery  ajax php  登录步骤：

 1、引入jQuery；

 2、触发事件 请求数据 ajax

 3、val（）、width（）、css（）、html（）aja

 4、$.ajax({

       type：“”//请求数据的类型  方式  请求数据\
       url:'denglu.php',//地址 请求地址  后台给的  接口
       data:{             //发送给后台的数据 传递的参数
              key:value,
                        //...
               },
       success:function(){
                   //成功后 返回的内容
         }

    })

 <script>
        //jquery_ajax
        //入口函数
        $(function(){
            
            //事件：点击按钮 
            // 1.点击  2.获取用户输入的内容 3.ajax(秘书) 拿着数据 请求页面  判断用户名或者密码是否正确
            $("#btn").click(function(){
                //获取用户输入的内容
                var name=$(".name").val();
                var password=$(".psd").val();
               //ajax 请求  ajax({key：value,...})
                $.ajax({
                    type:'get',//请求类型  表单请求方式 method 
                    //.html?username=huahua&password=123
                    url:'login.php?username='+name+'&userpassword='+password,//提交的页面
                    // data:{
                    //     //data:{第一个参数 后台的接收的变量名：第二个参数前端的获取的传递的值变量 }
                    //     username:name,
                    //     userpassword:password
                    // },
                    success:function(data){//请求php成功后 获取php给你内容
                        console.log(data);// 1 2  1 2 
                        //判断--
                        if(data==1){
                            $(".info").html('输入正确').css('color','green');
                        }else{
                            $(".info").html('账号或者密码错误').css('color','red');
                        }
                    }
                })    
            })
        })   
    </script>

    ps：data:{第一个参数 后台的接收的变量名：第二个参数前端的获取的传递的值变量 }

PHP部分：

<?php
    //获取用户的信息  输入的用户名 密码
    $name= $_GET['username'];
    $psd= $_GET['userpassword'];

   // echo $name.':'.$psd;
   //假设网上  数据 存的 用户名=huahua 密码：123
   if($name=='huahua' && $psd=='123'){
        echo 1;//1 定义的成功 
   }else{
       echo 2;//2 失败
   }
?>