Ajax 异步内容

简介

异步操作是JavaScript中最重要的内容之一,通过ajax获取同域网页的内容和通过ajax获取验证结果是项目开发当中常见的操作,本框架也有自己的ajax方法。

axAjax

完整写法:axAjax(option, elem) ,可简写为:axAjax(option),参数说明如下:

  • option:必填项,异步参数,格式如{url:''};option的选项如下:
    • url:获得异步内容页面
    • selector:异步内容中的选择器,可以填"#id"、".className"、"div";如果不填写会将整个页面作为内容载入,如果填写只会载入选择器中的内容。
    • type:数据请求方式,默认post,可选择get
    • async:是否是异步,默认true,可选择false即同步;一般使用true,否则该异步函数失去了意义。
    • before:成功获取前的内容,通常是函数function(loading,state,dom){}
      • loading:是加载图形,默认是'<span class="ax-loading"><i></i></span>'
      • state:当前状态值,即xhr.readyState的值
      • dom:存放结果的Dom,如果有填写elem参数则为elem,如果没有则为null
    • success:成功获取后的内容,通常是函数function(content,state,dom){}
      • content:获取成功后返回的内容
      • state:当前状态值,即xhr.readyState的值
      • dom:存放结果的Dom,如果有填写elem参数则为elem,如果没有则为null
    • error:获取失败的内容,通常是函数function(content,state,dom){}
      • content:获取成功后返回的内容
      • state:当前状态值,即xhr.readyState的值
      • dom:存放结果的Dom,如果有填写elem参数则为elem,如果没有则为null
    • data:异步地址(动态网页网址)上的参数,是一个对象,如{country:'china',city:'shenzhen'};表单异步校验的时候需要改参数
    • delay:异步请求多久后结束,默认60000(毫秒)
    • timeout:超时后的内容,通常是函数
    • loading:加载缓冲内容,默认是'<span class="ax-loading"><i></i></span>'
  • elem:选填项,存放内容的节点,可以填"#id"、".className"、"div"等原生选择器以及Dom对象。

异步获取整个页面

使用elem参数用来存放异步后的内容。获取内容

  •                                             <a href="###" id="btnPage" class="ax-btn ax-primary ax-sm">获取内容</a>
                                                <div id="ajaxPage"></div>
                                            
  •                                             document.querySelector('#btnPage').onclick = function () {
                                                    axAjax({
                                                        url: 'ajax/article.html',
                                                        success: function (content) {
                                                            //使用setTimeout模拟缓冲效果
                                                            setTimeout(function () {
                                                                document.querySelector('#ajaxPage').innerHTML = '获取成功!打开f12,查看控制台!';
                                                                console.log(content)
                                                            }, 5000);
                                                        },
                                                    }, '#ajaxPage')
                                                }
                                            

异步获取页面某ID内容

使用selector参数选择异步页面的id,使用elem参数用来存放异步后的内容。获取内容

  •                                             <a href="###" id="btnId" class="ax-btn ax-primary ax-sm">获取内容</a>
                                                <div id="ajaxId"></div>
                                            
  •                                             document.querySelector('#btnId').onclick = function () {
                                                    axAjax({
                                                        url: 'ajax/article.html',
                                                        selector:'#post02',
                                                        success: function (content) {
                                                            //使用setTimeout模拟缓冲效果
                                                            setTimeout(function () {
                                                                document.querySelector('#ajaxId').innerHTML = content;
                                                            }, 5000);
                                                        },
                                                    }, '#ajaxId')
                                                }
                                            

异步获取Json

使用url引用json页面,使用for+in方法拆解json内容并重新组装,使用elem参数用来存放异步后的内容。获取内容

  •                                             <a href="###" id="btnJson" class="ax-btn ax-primary ax-sm">获取内容</a>
                                                <div id="ajaxJson"></div>
    
                                            
  •                                             document.querySelector('#btnJson').onclick = function () {
                                                    axAjax({
                                                        url: 'ajax/axui.json',
                                                        success: function (content) {
                                                            //重新组装内容
                                                            let html = '
      '; for(let k in content){html+='
    • '+k+':'+content[k]+'
    • '; html+='
    '; } //使用setTimeout模拟缓冲效果 setTimeout(function () { document.querySelector('#ajaxJson').innerHTML = html; }, 5000); }, }, '#ajaxJson') }

自定义获取前内容

修改loading参数内容以改变获取前的显示内容,使用elem参数用来存放异步后的内容。获取内容

  •                                             <a href="###" id="btnBefore" class="ax-btn ax-primary ax-sm">获取内容</a>
                                                <div id="ajaxBefore"></div>
                                            
  •                                             document.querySelector('#btnBefore').onclick = function () {
                                                    axAjax({
                                                        url: 'ajax/axui.json',
                                                        loading:'加载中,请稍后!',
                                                        success: function (content) {
                                                            //使用setTimeout模拟缓冲效果
                                                            setTimeout(function () {
                                                                document.querySelector('#ajaxBefore').innerHTML = '获取成功!';
                                                            }, 5000);
                                                        },
                                                    }, '#ajaxBefore')
                                                }
                                            

获取失败

如果url错误,当时间超过预设的delay参数(默认60秒),则会执行error参数(函数),使用elem参数用来存放异步后的内容。获取内容

  •                                             <a href="###" id="btnError class="ax-btn ax-primary ax-sm">获取内容</a>
                                                <div id="ajaxError"></div>
                                            
  •                                             document.querySelector('#btnError').onclick = function () {
                                                    axAjax({
                                                        url: 'ajax/xxxxx',
                                                        delay:50000,
                                                        error: function (content) {
                                                            //使用setTimeout模拟缓冲效果
                                                            setTimeout(function () {
                                                                document.querySelector('#ajaxError').innerHTML = '获取失败!';
                                                            }, 5000);
                                                        },
                                                    }, '#ajaxError')
                                                }
                                            

异步检索

构造data对象,通过GET方法(使用POST也可以)传递至后台进行校验。

学生编号:
填“01~07”
  •                                             <form action="ajax/user.php" id="ajaxSearch">
                                       
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label">学生编号:</div>
                                                        <div class="ax-form-con">
                                                            <div class="ax-form-input"><input name="number" placeholder="输入编号" type="text"></div>
                                                        </div>
                                                        <span class="ax-form-txt">填“01~07”</span>
                                                    </div>
                                                </div>
                                            
                                                <div class="ax-break-md"></div>
        
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label"></div>
                                                        <div class="ax-flex-block">
                                                            <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交</button></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></div>
        
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label"></div>
                                                        <div class="ax-flex-block">
                                                            <div class="result"></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                            </form>
                                            
  •                                             document.querySelector('#ajaxSearch button').onclick = function () {
                                                    //获得要传递的值
                                                    let form = document.querySelector('#ajaxSearch'),
                                                        formData = {};
                                                    form.querySelectorAll('[name]').forEach(function (item) {
                                                        formData[item.getAttribute('name')] = item.value.trim();
                                                    });
                                                    axAjax({
                                                        url: 'ajax/search.php',
                                                        data: formData,
                                                        type: 'post',//默认是post,可选择get
                                                        success: function (content, state, dom) {
                                                            //使用setTimeout模拟缓冲效果
                                                            setTimeout(function () {
                                                                dom.innerHTML = content;
                                                            }, 1000);
                                                        },
                                                    }, '#ajaxSearch .result')
                                                }
                                            
  • <?php
    header("Content-Type:text/plain;charset=utf-8");
    //定义student变量,是被检索内容
    $student = array
     (
     	array("name" => "刘伟","number" => "01","grade" => "初一"),
     	array("name" => "张继红","number" => "02","grade" => "初三"),
    	array("name" => "王萌","number" => "03","grade" => "初一"),
     	array("name" => "魏训天","number" => "04","grade" => "高二"),
    	array("name" => "王川","number" => "05","grade" => "高一"),
    	array("name" => "欧阳泽","number" => "06","grade" => "高三"),
    	array("name" => "唐文明","number" => "07","grade" => "初二"),
     );
    //定义number变量
    if($_SERVER["REQUEST_METHOD"] =="GET") {
    	$number = $_GET["number"];
    } elseif($_SERVER["REQUEST_METHOD"] == "POST") {
    	$number = $_POST["number"];
    }
    //判断出结果
    if(!isset($number) || empty($number)) {
    	echo "未填学生编号!";
    	return;
    }
    $result = "没有这个人!";
    forEach($student as $value) {
    	if($value["number"] == $number) {
    		$result = "找到了!编号:".$value["number"].",姓名:".$value["name"].",年级:".$value["grade"];
    		break;
    	}
    }
    echo $result; 
    ?>
                                            

异步上传

构造data对象,通过POST方法传递至后台进行校验上传。

学生姓名:
学生编号:
学生年级:
  •                                     <form id="ajaxPost">
    
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">学生姓名:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input"><input name="name" placeholder="输入姓名" type="text"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                            <div class="ax-break-md"></div>
                                       
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">学生编号:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input"><input name="number" placeholder="输入编号" type="text"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                            <div class="ax-break-md"></div>
    
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">学生年级:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input"><input name="grade" placeholder="输入年级" type="text"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                            <div class="ax-break-md"></div>
    
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label"></div>
                                                    <div class="ax-flex-block">
                                                        <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交</button></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="ax-break-md"></div>
    
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label"></div>
                                                    <div class="ax-flex-block">
                                                        <div class="result"></div>
                                                    </div>
                                                </div>
                                            </div>
    
                                        </form>
                                            
  •                                             document.querySelector('#ajaxPost button').onclick = function () {
                                                    //获得要传递的值
                                                    let form = document.querySelector('#ajaxPost'),
                                                        formData = {};
                                                    form.querySelectorAll('[name]').forEach(function (item) {
                                                        formData[item.getAttribute('name')] = item.value.trim();
                                                    });
                                                    axAjax({
                                                        url: 'ajax/post.php',
                                                        data: formData,
                                                        type: 'post',
                                                        success: function (content, state, dom) {
                                                            //使用setTimeout模拟缓冲效果
                                                            setTimeout(function () {
                                                                dom.innerHTML = content;
                                                            }, 1000);
                                                        },
                                                    }, '#ajaxPost .result')
                                                }
                                            
  • <?php
    header("Content-Type:text/plain;charset=utf-8");
     if(!isset($_POST["number"]) || empty($_POST["number"]) || !isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["grade"]) || empty($_POST["grade"])) {
    	sleep(2);
    	echo "信息不完整,请重填!";
    	return;
    }
    echo "恭喜,保存成功!编号:".$_POST["number"].",姓名:".$_POST["name"].",年级:".$_POST["grade"];
    ?>
                                            

异步登录

构造data对象,通过POST方法传递至后台对已有账户进行校验。

账号:
填“李雷”或“韩梅梅”
密码:
填“123456”
  •                                         <form id="ajaxLogin">
    
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label">账号:</div>
                                                        <div class="ax-form-con">
                                                            <div class="ax-form-input"><input name="name" placeholder="输入账户" type="text"></div>
                                                        </div>
                                                        <span class="ax-form-txt">填“李雷”或“韩梅梅”</span>
                                                    </div>
                                                </div>
                                            
                                                <div class="ax-break-md"></div>
                                           
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label">密码:</div>
                                                        <div class="ax-form-con">
                                                            <div class="ax-form-input"><input name="pass" placeholder="输入密码" type="text"></div>
                                                        </div>
                                                        <span class="ax-form-txt">填“123456”</span>
                                                    </div>
                                                </div>
                                            
                                                <div class="ax-break-md"></div>
        
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label"></div>
                                                        <div class="ax-flex-block">
                                                            <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交</button></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                                <div class="ax-break-md"></div>
        
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label"></div>
                                                        <div class="ax-flex-block">
                                                            <div class="result"></div>
                                                        </div>
                                                    </div>
                                                </div>
        
                                            </form>
                                            
  •                                             document.querySelector('#ajaxLogin button').onclick = function () {
                                                    //获得要传递的值
                                                    let form = document.querySelector('#ajaxLogin'),
                                                        formData = {};
                                                    form.querySelectorAll('[name]').forEach(function (item) {
                                                        formData[item.getAttribute('name')] = item.value.trim();
                                                    });
                                                    axAjax({
                                                        url: 'ajax/login.php',
                                                        data: formData,
                                                        type: 'post',
                                                        success: function (content, state, dom) {
                                                            //使用setTimeout模拟缓冲效果
                                                            setTimeout(function () {
                                                                dom.innerHTML = content;
                                                            }, 1000);
                                                        },
                                                    }, '#ajaxLogin .result')
                                                }
                                            
  • <?php
    header("Content-Type:text/plain;charset=utf-8");
    //定义user变量,是被检索内容
    $user = array
     (
     	array("name" => "李雷","pass" => "123456"),
     	array("name" => "韩梅梅","pass" => "123456"),
     );
    //判断出结果
    if(!isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["pass"]) || empty($_POST["pass"])) {
    	echo "信息不完整,请重填!";
    	return;
    }
    $result = "登录失败,没有此账户!";
    forEach($user as $value) {
    	if(($value["name"] !== $_POST["name"]) || ($value["pass"] !== $_POST["pass"])){
    		$result = "登录失败!账户或密码错误";
    	}else if(($value["name"] == $_POST["name"]) & ($value["pass"] == $_POST["pass"]) ) {
    		$result = "登录成功!账户:".$_POST["name"].",密码:".$_POST["pass"];
    		break;
    	}
    }
    echo $result;
    ?>
                                            

axAjaxSubmit函数

对axAjax函数进行二次封装形成了更加实用的axAjaxSubmit函数。

完整写法:axAjaxSubmit(url, outer, target, successFun, loadingMode, type, delay, beforeFun, errorFun,options),可简写为:axAjaxSubmit(url, outer, target, successFun)。

具体参数说明如下:

  • url:必填项,表单异步提交地址。
  • outer:必填项,form节点,可以填"#id"、".className"、"div"等原生选择器以及Dom对象。
  • target:必填项,提交表单的按钮节点,可以填"#id"、".className"、"div"等原生选择器以及Dom对象。
  • successFun:必填项,提交成功后的回调函数,支持参数content,即返回值。
  • loadingMode:选填项,loading元素显示位置,默认button在按钮上显示,可选择form在表单上显示。
  • type:选填项,表单提交方式,默认post可选择get。
  • delay:选填项,延缓显示结果的时间,默认1000毫秒。
  • beforeFun:选填项,成功前的回调函数,支持参数loading,即加载元素。
  • errorFun:选填项,报错回调函数,支持参数data,即表单元素数据。
  • options:选填项,某些参数,具体如下:
    • formClass:提交中的表单样式,默认ax-form-submitting。
    • buttonClass:提交中的按钮样式,默认ax-button-submitting。
    • buttonText:按钮在表单提交时的文本,默认是:正在提交。
    • overlayClass:表单遮罩层的样式,默认是ax-form-overlay
    • overlayShowClass:表单遮罩层显示的样式,默认是ax-show
    • successText:提交成功后message显示的文字,默认是:恭喜!提交成功!
    • errorText:提交失败后message显示的文字,默认是:对不起,提交失败!