精华内容
下载资源
问答
  • //原生ajaxd的post请求模式 //预设ajax中的传输方式(post/get),地址,数据,传输形式 function ajax(methods,url,data,dataType){ return new Promise((resolve,reject)=>{ //使用promise方式 var xhr=...
    //原生ajaxd的post请求模式
    //预设ajax中的传输方式(post/get),地址,数据,传输形式
    function ajax(methods,url,data,dataType){
        return new Promise((resolve,reject)=>{ //使用promise方式 
            var xhr=window.XMLHttpRequest?
            new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
            //判断当前浏览器是否为ie
            xhr.open(methods,url,true);//设置open的内容,第三个参数是是否打开异步,默认不填也是true(异步)
            if(methods=="post"){//如果当前用户用得到是post方式传递数据则需要添加请求头
                xhr.setRequestHeader(
                    "Content-Type", "application/x-www-form-urlencoded");
            }
            
        var data2='';
        for(var i in data) {//设置当前传递的数据改为字符串形式传递给后端
                data2+=i+"="+data[i]+"&";
            }
            data2=data2.slice(0,data2.length-1)   //删除改字符串的最后一个&字符
            xhr.onreadystatechange=()=>{
                if(xhr.readyState==4){//判断当前的状态值
                    if(xhr.status==200){
                        if(dataType=="json"){//判断当前是否需要传递json的值
                            resolve(JSON.parse(xhr.responseText))
                        }else{
                            resolve(xhr.responseText)
                        }
                       
                    }else{
                        reject("请求出错:"+xhr.status)
                    }
                }
            }
            xhr.send(data2);
        })
    }
    var data={
        uname:"gfz",
        upwd:123
        }; 
    dataType="json";
    
    ajax("post","login2.php",data,"text").then(function(data){//返回resolve
        console.log(data)
    }).catch(function(data){//错误返回reject
        console.log(data)
    });
    
    
    
    
    
    
    
    
    php可以看下这个
    <?php
    //1:设置响应头 json
    // header("Access-Control-Allow-Origin:*");
    header("Content-Type:application/json;charset=utf-8");
    //4:获取用户名参数
    //5:获取密码参数
    $u = $_POST['uname'];
    $p = $_POST['upwd'];
    
    //5.1通过正则表达式在PHP对用户参数再验证
    $uPattern = '/[a-zA-Z0-9]{3,12}/';
    $pPattern = '/[a-zA-Z0-9]{3,12}/';
    if(!preg_match($uPattern,$u)){
     echo '{"code":-2,"msg":"用户名格式不正确"}';
     exit;//停止php运行
    }
    if(!preg_match($pPattern,$p)){
     echo '{"code":-2,"msg":"密码格式不正确"}';
     exit;//停止php运行
    }
    
    echo "登陆成功"; 
    
    ?>

     

    展开全文
  • ajax使用回调函数的例子(原生代码和jquery代码) 一、 ajax代码存在的问题(异步交互的问题) ajax所请求的url,如果因为网络等问题,很久没有回应,则给用户造成“假死”的现象。 代码如下: xmlHttp = ...

    via: http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22

     

    ajax使用回调函数的例子(原生代码和jquery代码)

    一、 ajax代码存在的问题(异步交互的问题)

    ajax所请求的url,如果因为网络等问题,很久没有回应,则给用户造成“假死”的现象。

    代码如下:

    xmlHttp = GetXmlHttpObject();

     

    xmlHttp.open();

    xmlHttp.send();

    //下面这句,会一直等待,直到有返回值

    alert(xmlHttp.responseText);

     

     

    二、 ajax代码异步交互的解决方式

    1. Javascript原生ajax代码

    先创建xmlhttp对象,然后执行open和send,通过xmlHttp.onreadystatechange = stateChanged回调函数来处理返回值。

    readyState== 0 //尚未加载
    readyState== 1 //正在加载
    readyState== 2 //加载完毕
    readyState== 3 //正在处理
    readyState== 4 //处理完毕

     

    <script type="text/javascript" >

    //创建ajax

    function testAjax(){

    xmlHttp = GetXmlHttpObject();

    if(xmlHttp == null){

    alert("浏览器不支持");

    return;

    }

     

    var url = "http://www.qq.com";

    xmlHttp.onreadystatechange = stateChanged;

    xmlHttp.open("GET", url, true);

    xmlHttp.send();

    //document.getElementById("txt").innerHTML=xmlHttp.responseText;

    }

     

     

    //创建不同的ajax对象

    function GetXmlHttpObject(){

    var xmlHttp = null;

      try{

      //firefox opera safari

    xmlHttp = new XMLHttpRequest();

      }catch (e){

    //ie

    try{

    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    }catch(e){

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    }

    return xmlHttp;

    }

     

    //监控状态

    function stateChanged() 

     

      if (xmlHttp.readyState==4)

      { 

      //document.getElementById("txt").innerHTML=xmlHttp.responseText;

    alert(xmlHttp.responseText);

      }

    </script>

    2. jquery中ajax的写法

    (1)Post写法

     

     

    var txt = $("input").val();//换的某个输入框的value

    //使用post方法,传输值为suggest=txt,绑定回调函数

    $.post("test.html", {suggest:txt}, function(result){

    $("#div").html(result);

    });

     

    (2)Get写法

     

    var txt = $("input").val();//换的某个输入框的value

    //使用get方法,传输值为suggest=txt,绑定回调函数

    $.get("test.html", {suggest:txt}, function(result){

    $("#div").html(result);

    });

     

    (3)ajax写法(通过http请求)

     

    $.ajax({

    type: "get",

    url: "http://www.cnblogs.com/rss",

    beforeSend: function(XMLHttpRequest){

    //ShowLoading();

    },

    success: function(data, textStatus){

    $(".ajax.ajaxResult").html("");

    $("item",data).each(function(i, domEle){

    $(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");

    });

    },

    complete: function(XMLHttpRequest, textStatus){

    //HideLoading();

    },

    error: function(){

    //请求出错处理

    }

    });

    展开全文
  • 回调函数 下面的函数表示在getdate方法执行完再执行log 方法(以此保证在执行log方法时ajax数据能够获取加载完成)var data;function getdate(callback){ //传入一个callback参数 var xhr=new XMLHttpRequest(); xhr...
    回调函数  下面的函数表示在getdate方法执行完再执行log 方法(以此保证在执行log方法时ajax数据能够获取加载完成)
    var data;
    function getdate(callback){ //传入一个callback参数
    var xhr=new XMLHttpRequest();
    xhr.open("get","product.json",true);
    xhr.send(null);
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
    data=eval(xhr.responseText);
    callback(); 此时的参数callback相对于log 等于在调用log方法
    console.log(callback==log)
    }
    }
    }
    function log(){
    console.log(data)
    }
    getdate(log); //callback变成实参log

    事件监听(与回调函数效果相同)

    案例

     $("#append").click(function(){
    $("#content").html("<div id='son' style='width: 200px;height: 100px; border: 1px solid skyblue'>增加的新内容</div>")
    $(document).trigger("done") //所有文档都加载完成时立即出发done实践,开始执行hander()事件
    })
    function hander(){
    $("#son").click(function(){
    alert(11)
    })
    }

    $(document).on("done",hander)//$(document)发生done事件就执行hander事件

    ajax拿到数据(1.回调函数 2.事件监听 3.自己定义一个promise对象(deffered))

     

    deferred(应用)

       
    var a;
    var dtd = $.Deferred();
    console.log(dtd);
    var wait = function(dtd){
    var tasks = function(){
    a=1;
    // dtd.reject();//改变dtd的状态:进入失败方法
    dtd.resolve();//改变dtd的状态进入成功方法
    };
    setTimeout(tasks,5000);
    return dtd;
    };
    function log() {
    console.log(a);
    }
    function tip() {
    alert("请求出错了")
    }
    $.when(wait(dtd)).done(function () {
    log(); //等wait方法执行完后执行log方法(成功方法)
    }).fail(function () {
    tip();//失败进入的方法
    })
    angular js 中获取ajax数据用到的then成功方法与 jquery获取ajax用到的success方法的区别 (在于then在promise中生成)
    Promise对象的生成

    ES6提供了原生的Promise构造函数,用来生成Promise实例。

    下面代码创造了一个Promise实例。

    var promise = new Promise(function(resolve, reject) {
    // 异步操作的代码

    if (/* 异步操作成功 */){
    resolve(value);
    } else {
    reject(error);
    }
    });

    Promise的介绍
    Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件。

    Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,
    由JavaScript引擎提供,不用自己部署。

    resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),
    在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从
    “未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误,
    作为参数传递出去。

    Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。

     $q.defer() 构建的 deffered 实例的几个方法的作用。如果异步操作成功,则用resolve方法将Promise对象的状态变为“成功”(即从pending变为resolved);如果异步操作失败,则用reject方法将状态变为“失败”(即从pending变为rejected)。最后返回 deferred.promise ,我们就可以链式调用then方法。

    Promise API

    当创建 deferred 实例时会创建一个新的 promise 对象,并可以通过 deferred.promise 得到该引用。

    promise 对象的目的是在 deferred 任务完成时,允许感兴趣的部分取得其执行结果。

    小结
    Promise对象的优点在于,让回调函数变成了规范的链式写法,程序流程可以看得很清楚。
    它的一整套接口,可以实现许多强大的功能,比如为多个异步操作部署一个回调函数、
    为多个回调函数中抛出的错误统一指定处理方法等等。而且,它还有一个前面三种方法都没有的好处:
    如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。
    这种方法的缺点就是,编写和理解都相对比较难。

    转载于:https://www.cnblogs.com/yaomengli/p/6814038.html

    展开全文
  • 在请求jquery 的ajax方法时,回调函数不执行问题,找了各种原因,各种的更改ajax参数类型和webapi返回类型 各种不行,最后发现layui框架默认是form提交未问题,想要让他执行ajax成功回调函数 就只是一句话 DOM元素...

    layui之ajax巨坑 现象

    在使用layui做前端框架的时候,在请求jquery 的ajax方法时,回调函数不执行问题,找了各种原因,各种的更改ajax参数类型和webapi返回类型 各种不行,最后发现layui框架默认是form提交未问题,想要让他执行ajax成功回调函数                                         

    就只是一句话 DOM元素交互事件处理回调函数 添加 return false  看代码

     

    $("#submitButton").click(function () {
        vlidateResult = $("#registerForm").valid();
        if (vlidateResult) {
            var stringToCommit = sale3_form2JsonString("registerForm");
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/sales3_web/ssoMgt/addSSOAccount",
                contentType: "application/json", //必须这样写
                dataType: "json",
                data: stringToCommit,
                success: function (data) {
    
                    layer.alert(data.message);
                    //layui.msg("添加账号成功!", {icon: 5});
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
    
            });
        }
        return false;
    });

     

    亲测好用!

    展开全文
  • ajax使用回调函数的例子(原生代码和jquery代码) 一、 ajax代码存在的问题(异步交互的问题) ajax所请求的url,如果因为网络等问题,很久没有回应,则给用户造成“假死”的现象。 代码如下: ...
  • 什么是ajax回调函数 如果要处理ajax请求后得到的数据,则需要使用回调函数 success:请求后成功调用,传入返回的数据 error:请求后失败调用,返回错误类型和异常原因 beforeSend:请求前调用,传入...
  • 原生vue中使用jquery的ajax请求success的回调函数回显绑定的vue数据失败 问题描述 vue-cli主要应用于单页面应用,很多时候我们并不去使用脚手架,但却也会在普通的H5项目中使用原生的vue进行便捷的数据绑定和回显。...
  • 这里对于Promise的介绍及用法 还有关于回调地狱(一个函数作为参数需要依赖另一个函数执行调用)的解决方案有很多就不介绍了 今天主要实现的功能是原生Ajax请求通过Promise包装 function AjaxPromise(url) { ...
  • 在学习AJAX通信技术之前,强烈推荐大家学习一下阮一峰老师的《javaScript教程》 地址:https://wangdoc.com/javascript/bom/xmlhttprequest.html 浏览器与服务器之间,采用 HTTP 协议通信。用户在浏览器地址栏键入一...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 233
精华内容 93
关键字:

原生ajax回调函数