ajax的封装与简单实例

最新推荐文章于 2024-08-03 21:03:47 发布

Submerge~

最新推荐文章于 2024-08-03 21:03:47 发布

阅读量578

点赞数 1

文章标签： ajax php

本文链接：https://blog.csdn.net/MixedSignals/article/details/106528655

版权

封装的四个步骤：
①创建ajax对象
②配置定义请求信息内容
③发送ajax请求
④接收响应内容

针对于get请求

      function ajax(url, fnSuccess, fnError) {
        if (window.XMLHttpRequest) { //创建ajax实例化对象
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("get", url);//设定ajax请求信息
        xhr.send();//发送请求
        xhr.onreadystatechange = function () {//接收响应
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              fnSuccess(data);
            } else {
              fnError();
            }
          }
        };
      }

post请求方式要比get方式多设定一个请求头，还要多设定一个请求参数的数据

      function ajax(url, fnSuccess, fnError) {
        if (window.XMLHttpRequest) { //创建ajax实例化对象
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("post", url，datastr);//设定ajax请求信息
        xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
        xhr.send(datastr);//发送请求
        xhr.onreadystatechange = function () {//接收响应
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              fnSuccess(data);
            } else {
              fnError();
            }
          }
        };
      }

实例①通过ajax方式请求访问php程序

<script>
const oBtn = document.querySelector('button');
oBtn.addEventListener('click' , ()=>{

var xhr = new XMLHttpRequest()//通过系统构造函数,创建ajax实例化对象
xhr.open('get' , './ajax1.php');//参数1是请求方式，参数2是请求目标的路径地址
xhr.send();//get方式不需要设定参数,post方式需要设定参数
xhr.onload = function{
console.log(xhr);}})

</script>

ajax1.php里的内容为

<?php
echo '我是随便输出的内容,我就冒充响应体';

在这里插入图片描述

实例②通过ajax方式来请求访问PHP程序，使用get方式并且携带参数

<script>
const oBtn = document.querySelector('button');
oBtn.addEventListener('click' , ()=>{

var xhr = new XMLHttpRequest()//通过系统构造函数,创建ajax实例化对象
xhr.open('get' , './ajax1.php？name=张三&age=18');//参数1是请求方式，参数2是请求目标的路径地址
xhr.send();//get方式不需要设定参数,post方式需要设定参数
xhr.onload = function{
console.log(xhr);}})

</script>

ajax2.php里的内容为

<?php
echo json_encode($_GET);
// $_GET其中存储的是前端的参数，返回这个$_GET中的数据内容
// $_GET是一个数组，需要转化为json串的形式返回
// 将$_GET数组转化为json字符串输出，作为响应体内容

在这里插入图片描述
实例③实现简单的登录效果

<body>
    <h1>ajax请求demo3,简单的登录效果</h1>
    账号 : <input type="text"><br>
    密码 : <input type="password"><br>
    <button>点击访问</button>
    
    <script>
        // 通过input标签输入账号密码，通过ajax方式来请求访问PHP程序，使用get方式并且携带input标签输入的的参数
            const oBtn = document.querySelector('button');
            oBtn.addEventListener('click' , ()=>{
            let regname = document.querySelectorAll('input')[0].value;
            let regpwd = document.querySelectorAll('input')[1].value;
           
            // 1,创建ajax请求对象
            const xhr = new XMLHttpRequest();

            // 2,设定ajax请求相关信息
            // 设定的参数是通过JavaScript方式获取的input标签的数值数据，open的参数必须是字符串形式，需要使用模板字符串来解析变量
            xhr.open('get' , `./ajax3.php?regname=${regname}&regpwd=${regpwd}`);

            // 3,发送请求
            xhr.send();

            // 4,接收响应体
            xhr.onload = function(){
            console.log(xhr);
            }
        })
    </script>
    </body>

ajax3.php中的内容为

<?php
// 1,接收前端参数
$regname = $_GET['regname'];
$regpwd = $_GET['regpwd'];

// 2,根据参数对数据库执行查询操作，链接数据库服务器
$link = mysqli_connect('127.0.0.1' , 'root' , 'root' , 'nz2002' , 3306);

// 定义SQL语句，所有的名称都是反引号，字符串数是单引号
$sql = "SELECT * FROM `user` WHERE `username` = '{$regname}' AND `userpwd` = '{$regpwd}' ";

// 执行SQL语句
$result = mysqli_query($link , $sql);

// 获取执行结果
$arr = mysqli_fetch_all($result , MYSQLI_ASSOC);

// 根据结果执行不同操作
if(count($arr) !== 0){
    // 不等于0,就是数组有长度,登录成功
    // 就返回一个1,表示登录成功
    echo 1;
}else{
    // 等于0,就是数组没有内容,登录失败
    // 就返回一个0,表示登录失败
    echo 0;
}

// 关闭数据库
mysqli_close($link);

在这里插入图片描述

Submerge~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax的封装与简单实例

封装的四个步骤：①创建ajax对象②配置定义请求信息内容③发送ajax请求④接收响应内容针对于get请求 function ajax(url, fnSuccess, fnError) { if (window.XMLHttpRequest) { //创建ajax实例化对象 var xhr = new XMLHttpRequest(); } else { var xhr = new ActiveXObject("Mi
复制链接

扫一扫