精华内容
下载资源
问答
  • javascript中使用ajax时设置回调函数,我想向回调函数中传参?该怎么传参? getCitysByParentId是回调函数,我现在想往getCitysByParentId这个回调函 数中传liId这个参数进去,该怎么处理? ``` var ...
  • Ajax回调函数(js与JQuery写法)

    千次阅读 2021-01-19 17:13:54
    什么是ajax回调函数 如果要处理ajax请求后得到的数据,则需要使用回调函数 success:请求后成功调用,传入返回的数据 error:请求后失败调用,返回错误类型和异常原因 beforeSend:请求前调用,传入...

    什么是ajax回调函数

    如果要处理ajax请求后得到的数据,则需要使用回调函数

    success:请求后成功调用,传入返回的数据

    error:请求后失败调用,返回错误类型和异常原因

    beforeSend:请求前调用,传入XMLHttpRequest 作为参数

    dataFilter:请求成功后调用,传入返回的数据和dataType参数值

    complete:请求后调用,无论成功还是失败,返回XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串

    代码示例

    JS原生写法

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

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

    //创建ajax
    function testAjax () {
      xmlHttp = GetXmlHttpObject();
      if (xmlHttp == null) {
        alert("浏览器不支持");
        return;
      }
    
      var url = "http://www.xx.com";
      xmlHttp.onreadystatechange = stateChanged;
      xmlHttp.open("GET", url, true);
      xmlHttp.send();
      //document.getElementByIdx_x("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.getElementByIdx_x("txt").innerHTML=xmlHttp.responseText;
        alert(xmlHttp.responseText);
      }
    
    }

     JQuery写法

    // (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) {
        //代码段;
      },
    
      success: function (data, textStatus) {
        $(".ajax.ajaxResult").html("");
        $("item", data).each(function (i, domEle) {
          $(".ajax.ajaxResult").append(
            "代码段")
        });
      },
    
      complete: function (XMLHttpRequest, textStatus) {
        //代码段;
      },
    
      error: function () {
        //请求出错处理
      }
    
    });
    

    展开全文
  • Javascript AJAX回调函数传递参数

    万次阅读 2014-12-10 20:46:28
    在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1)...

    在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢?

           
          var callback = function(p1){
             //do something
          }
    
          var ajaxSetting = {
                url: url,
                timeout:me.timeout,
                type: method,
                contentType: "application/json",
                dataType: "json",
                cache: false,
                async: async,
                data: p_data,
                success: callback
                },
                error: function(p_request, p_status, p_err) {
    
                }
            };

    解决的办法是利用匿名函数:

    success: function(result){

         callback(p1_actual);

    }


    其中p1_actual是已知的参数,可以是function类型。

    展开全文
  • 使用Jquery的时候发现它里面的很多方法都提供回调函数,接下来通过本篇文章给大家介绍js自定义回调函数,需要的朋友参考下
  • 原生vue中使用jquery的ajax请求success的回调函数回显绑定的vue数据失败 问题描述 vue-cli主要应用于单页面应用,很多时候我们并不去使用脚手架,但却也会在普通的H5项目中使用原生的vue进行便捷的数据绑定和回显。...

    原生vue中使用jquery的ajax请求success的回调函数回显绑定的vue数据失败

    问题描述

    vue-cli主要应用于单页面应用,很多时候我们并不去使用脚手架,但却也会在普通的H5项目中使用原生的vue进行便捷的数据绑定和回显。问题出自于原生vue中使用jquery的ajax请求success的回调函数回显绑定的vue数据失败?

    H5代码
    	<div id="aside-wrap">
            <!--    博主信息    -->
            <div class="blogger-info aside-base">
                <img :src="bloggerInfo.picture" alt="博主头像" class="blogger-img">
                <p id="test">昵称:{{ bloggerInfo.nickname }}</p>
                <p>邮箱:{{bloggerInfo.email}}</p>
                <p>职业:后端开发工程师</p>
            </div>
        </div>
    
    js代码
    $(document).ready(function () {
        //侧边栏的vue
        let aside = new Vue({
            el: '#aside-wrap',
            data: {
                //博主信息
                bloggerInfo: '',
            },
            methods:{
                getBloggerInfo(){
                    //请求博主信息
        			$.get(baseUrl + "/api/user/8", function (data, status, xhr) {
            			this.bloggerInfo = data;
        			}, "json");
                }
            },
            //页面加载请求相应数据
            mounted() {
                this.getBloggerInfo();
            },
        });
    });
    

    预期中,在关于dom中绑定的关于bloggerInfo信息,应该在页面加载时向后端发送请求,然后将数据回显到页面当中才对,但是没有想象中的预期结果。

    之后经过排查问题,才发现原来bloggerInfo并没有得到相应的数据。

    问题原因

    原来问题的原因是原生vue中使用jquery的ajax并不向vue的axios请求那样在回调函数中可以使用this,对vue中直接声明的属性赋值。
    即问题出在以下代码中

    	$.get(baseUrl + "/api/user/8", function (data, status, xhr) {
            this.bloggerInfo = data;
        }, "json");
    

    this.bloggerInfo并不是指代data中声明的bloggerInfo,所以这里的赋值是失败的。这里的this,应该指的是回调函数本身吧。

    问题解决

    所以可以直接使用vue的实例对象,直接完成赋值,即aside.bloggerInfo = data;

    修改后代码如下:

    $(document).ready(function () {
        //侧边栏的vue
        let aside = new Vue({
            el: '#aside-wrap',
            data: {
                //博主信息
                bloggerInfo: '',
            },
            methods:{
                getBloggerInfo(){
                    //请求博主信息
        			$.get(baseUrl + "/api/user/8", function (data, status, xhr) {
            			aside.bloggerInfo = data;
        			}, "json");
                }
            },
            //页面加载请求相应数据
            mounted() {
                this.getBloggerInfo();
            },
        });
    });
    

    根源性问题还是出现在this的指代问题上。

    展开全文
  • 一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数...
  • 在请求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;
    });

     

    亲测好用!

    展开全文
  • //原生ajaxd的post请求模式 //预设ajax中的传输方式(post/get),地址,数据,传输形式 function ajax(methods,url,data,dataType){ return new Promise((resolve,reject)=>{ //使用promise方式 var xhr=...
  • 这里对于Promise的介绍及用法 还有关于回调地狱(一个函数作为参数需要依赖另一个函数执行调用)的解决方案有很多就不介绍了 今天主要实现的功能是原生Ajax请求通过Promise包装 function AjaxPromise(url) { ...
  • ajax使用回调函数的例子(原生代码和jquery代码) 一、 ajax代码存在的问题(异步交互的问题) ajax所请求的url,如果因为网络等问题,很久没有回应,则给用户造成“假死”的现象。 代码如下: xmlHttp = ...
  • js原生ajax汇总函数

    2021-07-02 14:46:25
    //ajax model function ajax(url, method, msg, fn, id,innerHTMLId) { var xmlhttp; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  • 主要区别是 axios、fetch请求后都支持Promise对象API,ajax只能用回调函数ajaxAjax被认为是(Asynchronous JavaScript and XML)的缩写。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。依赖...
  • 在学习AJAX通信技术之前,强烈推荐大家学习一下阮一峰老师的《javaScript教程》 地址:https://wangdoc.com/javascript/bom/xmlhttprequest.html 浏览器与服务器之间,采用 HTTP 协议通信。用户在浏览器地址栏键入一...
  • 原生ajax函数封装

    2019-02-08 20:31:29
    ajax Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载...
  • 一、JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据; 下面简单封装一个...
  • 原生AJAX请求以及AJAX跨域问题

    千次阅读 2019-09-16 18:26:39
    在jQuery中不需要重新定义回调函数,服务端会自动将success,fail视为回调函数并在成功/失败时返回调用语句。 3. 通过CROS跨域请求原理 只要服务器端允许即可。在服务器端添加响应头: // node中: res ....
  • 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题。 JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个...
  • 原生js封装ajax函数

    2017-03-23 20:23:56
    function ajax(method,url,data,fnsuccess){ //1号线:创建ajax对象 var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); } else{ xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2号线:...
  • 深入理解回调函数的使用

    千次阅读 2017-08-21 17:40:41
    回调函数在框架中的使用是家常便饭,无论是前台框架还是后台框架,譬如,Jquery的Aajax函数就封装了回调的功能,Spring在整合Hibernate的时候也封装了回调的功能,那为什么要有回调那?回调函数到底有什么作用那?小...
  • 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一、AJAX AJAX的核心是XMLHttpRequest。 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接...
  • 原生ajax的请求流程

    2020-06-15 08:09:23
    //第一步,创建XMLHttpRequest对象 var xmlHttp = new ... //第二步,注册回调函数 xmlHttp.onreadystatechange =callback1; //{ // if (xmlHttp.readyState == 4) // if (xmlHttp.status == 200) { // var
  • 原生AJAX请求

    2018-12-10 21:19:15
    1.原生ajax请求的写法 &lt;script&gt; var btn = document.querySelector('button');ajax btn.onclick = function (){ //(0)创建出一个xhr对象,准备发送ajax请求 var xhr = new XMLHttpRequest(); /...
  • Ajax工作流程(原生Ajax)

    2021-03-07 23:30:21
    (2)为XMLHttpRequest对象指定一个回调函数,用于对后台返回结果进行处理。 (3)创建一个与服务器的连接,在创建时,需要指定发送请求的方式(GET/POST),以及设置是否采用异步方式发送请求。 (4)向服务器...
  • 原生Ajax实现的5个步骤

    千次阅读 多人点赞 2019-08-21 09:30:30
    原生Ajax实现的5个步骤 1.创建对象 首先我们需要一个Ajax的对象。在这里我们需要注意的是,由于不同的浏览器内核问题,部分浏览器对Ajax对象的创建方式不一样。在以IE7以下版本为内核的浏览器中,没有提供...
  • js原生Ajax请求

    2019-09-01 23:27:29
    首先我们需要创建一个XMLHttpRequest对象,该对象提供了我们进行Ajax请求的方法 1、建立Ajax连接 2、设置请求的header(参数中有中文时需要设置)和需要传递的参数(GET方法在url后拼接) 3、发送数据到服务器 .send...
  • ajax AJAX的核心是XMLHttpRequest。 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据 我将AJAX请求封装成ajax()方法,它接受一个配置对象params。 function ...
  • Ajax同步请求和异步请求 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sXlzf7HN-1595230000395)(C:\Users\YangJian\Desktop\同步请求和异步请求.png)] Ajax 是一种在无需重新加载整个...
  • 回调函数 下面的函数表示在getdate方法执行完再执行log 方法(以此保证在执行log方法时ajax数据能够获取加载完成)var data;function getdate(callback){ //传入一个callback参数 var xhr=new XMLHttpRequest(); xhr...
  • 原生ajax请求的五个步骤

    千次阅读 2020-07-13 17:40:13
    原生ajax请求的五个步骤第一步,创建XMLHttpRequest对象第二步,注册回调函数第三步,配置请求信息,open(),get第四步,发送请求,post请求下,要传递的参数放这第五步,创建回调函数 第一步,创建XMLHttpRequest对象...
  • 2.编写一个回调函数 3.编写请求方式和请求路径(open操作) 4.编写请求头 5.发送请求(send操作) 例子:模拟注册用户名,若填入的用户名不存在,则提示可以使用;否则,提示用户名已被占用 Jsp页面如下 JS...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,650
精华内容 8,260
关键字:

原生ajax回调函数