编程技术

Document

php中Ajax的简单使用，登录表单调用Ajax判断是否正确登录利用layer.msg进行提示

php中Ajax的简单使用

jQuery中如何使用Ajax？

jQuery 中封装了两个方法 get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

1. get

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法格式：

$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )
  • URL：发送请求的 URL字符串。
  • data：可选的，发送给服务器的字符串或 key/value 键值对。
  • callback：可选的，请求成功后执行的回调函数。
  • dataType：可选的，从服务器返回的数据类型。（可以是xml, json, script, 或 html）。

$.get() 使用例子：

 <button id="btn1">get</button>

$("#btn1").click(function (){
    // get 格式 $.get(url,callback) $.get(url连接,回调函数)
    $.get("请求url",function (data,status){
        alert(data+"状态:"+status);
    })
});

2. post

$.post() 方法通过 HTTP POST 请求向服务器提交数据

语法格式:

$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )
  • URL：发送请求的 URL字符串。
  • data：可选的，发送给服务器的字符串或 key/value 键值对。
  • callback：可选的，请求成功后执行的回调函数。
  • dataType：可选的，从服务器返回的数据类型。（可以是xml, json, script, 或 html）。

$.post() 常使用的方式：

 <!--  利用ajax 完成 表单数据的上传  -->
<form>
    <input type="text" id="uname" name="uname"><br>
    <input type="password" id="upwd" name="upwd"><br>
    <input type="button" value="提交" id="btn2">
</form>

$("#btn2").click(function (){
    $.post("请求url",{
        // 封装表单需要的字段及数据
        "uname":$("#uname").val(),// uname="xxx"
        "upwd":$("#upwd").val()// upwd="xxx"
    },function (data,status) {
        if(status=="success"){
            alert('请求成功);
        }else{
            alert('请求失败);
        }
    })
})

举例：登录结合ajax的使用

为了方便，我们直接使用layui框架，快速完成前端页面的构建

前端部分（login.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- 引入 layui.css -->
  <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
  <!-- 引入 layui.js -->
  <script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
  <!--jquery cdn-->
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
<style>
  .demo-login-container{width: 320px; margin: 21px auto 0;margin-top: 200px;}
  .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名"
               autocomplete="off" class="layui-input" lay-affix="clear" id="uname">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码"
               autocomplete="off" class="layui-input" lay-affix="eye" id="upwd">
      </div>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid"  lay-verify="required" id="login" type="button">登录</button>
    </div>
    <div class="layui-form-item demo-login-other">
      <label>社交账号登录</label>
      <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
      或 <a href="form.html#reg">注册帐号</a></span>
    </div>
  </div>
</form>
<script>
    // 这里为了方便直接调用ajax来做弹出层
    $("#login").click(function () {
      $.post("main_post.php",{
        // 设定post表单的数据  username="xxx" password="xxx"
        "username":$("#uname").val(),
        "password":$("#upwd").val()
      },function (data,status) {
        if(data=="ok"&&status=="success"){
          layer.msg('登录成功', {icon: 6});
        }else{
          layer.msg('登录失败', {icon: 5});
        }
      })
    })
</script>
</body>
</html>

后端部分（main_post.php）

<?php

if($_POST){
    // 只要输入名为 张三 密码为123，即认为正确登录（实际上肯定是去查询数据库，这里我就简单演示下）
    $uname = $_POST['username'];
    $upwd = $_POST['password'];
    if($uname=="张三"&&$upwd=="123"){
        echo "ok";
    }else{
        echo "no";
    }
}

运行测试

1. 测试错误数据

在这里插入图片描述

在这里插入图片描述

2. 测试正确的数据

在这里插入图片描述

在这里插入图片描述

jQuery中调用Ajax真的太方便了，调api就是香！