devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Ajax知识点_success: function(res)

作者：花生_TL007 | 2024-02-17 05:55:26

赞

踩

success: function(res)
  • 概念：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，Ajax能让我们轻松的实现网页与服务器之间的数据交互。局部刷新（无刷新）

标题1 jQuery中的Ajax

  1. jQuery中Ajax请求的方式主要有一下三种
  • 1.1 $.get()语法格式:$.get(url,[data],[callback])
    url参数类型：string
    data参数类型：object
    callback参数类型：function
    $.get(URL地址，[携带的参数],[请求成功后的回调函数])
    $.get()函数发起不带参数的请求，直接提供请求的URL地址和请求成功后的回调函数
$.get('http"//www.baidu.com',function(res) {
console.log(res);//这里的res是服务器返回的数据
})

  • 1
  • 2
  • 3

$.get()函数发起带参数的请求

$.get('http"//www.baidu.com', {id : 1},function(res) {
console.log(res);//这里的res是服务器返回的数据
})

  • 1
  • 2
  • 3
  • 1.2 $.post()用法和get方式一样
  • 1.3 $.ajax()基本语法格式：
$.ajax({
    method:""   // 请求的方式，是提交数据还是获取数据
    url:  ""    //请求的url地址
    data: {  }    //这次请求携带的参数
    success : function(res) { }   //请求成功之后的回调函数
    async: true,//默认是true，所有的请求均为异步请求，如果是同步请求，值为false
    dataType:  //预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断。可以是text、json、jsonp、html、xml、script
    jsonp:        //在一个jsonp请求中重写回调函数的名字，可以是callback
    jsonpCallback:   //为jsonp请求指定的回调函数名
    error:         //失败之后的回调函数
    complete:      //无论成功还是失败都会触发的回调函数
    timeout:          //请求超时时间（毫秒）
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1.4 resetui()函数重置滚动条的位置
  1. form标签的属性
  • 2.1 表单的各个属性
    action:向何处发送表单数据

target：在何处打开action的url地址 _blank 在新窗口打开 _self 默认，在相同的框架中打开

method:以何种方式把表单数据提交到action url中 get方式数据暴露，默认情况

enctype: application-x-www-form-urlencoded 默认 multipart/form-data 在使用包含文件上传控件的表单时，必须使用该值 text/plain 空格转换为‘+’加号，但不对特殊字符进行编码

  • 2.2 表单同步提交的缺点：整个页面会发生跳转，用户体验差；同步提交后，页面之前的状态和数据会丢失
  • 2.3 解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器
  1. 通过Ajax提交表单数据
  • 3.1 监听表单（不是提交按钮）的提交事件jqsubmit jqonsubmit
$("form").submit(function(){});
$("form").on("submit",function() {})

  • 1
  • 2
  • 3.2 阻止表单的默认行为 e.preventDefault() jquery中阻止默认行为：return false js中阻止事件捕获和事件冒泡行为 e.stopPropagation()
  • 3.3 serialize()函数 快速获取表单数据，每个表单元素必须设置name属性
<form>
<input type="text" class="form-control" name="uname" placeholder="请输入书名">
<input type="password" class="form-control" name="pwd" placeholder="请输入书名">
</form>
$("form").serialize();//输出结果是uname='用户在text填入的内容'&pwd="用户在password框填入的内容"。这种方式叫做查询字符串的方式

  • 1
  • 2
  • 3
  • 4
  • 5

如果是使用Ajax方式请求，表单元素的值尽量设置和接口文档中的参数名字一样

  • 3.4reset()函数 快速清空表单的值，这个函数方法属于原生js，所以获取的jQuery元素要转换成js $('form')[0].reset()

标题2 art-template模板引擎

  1. art-template的安装：通过script标签进行引用，进而使用
  2. 使用步骤：
  • 2.1 导入art-template
<script src="templat-web.js"></script>

  • 1

注：只要导入了模板引擎，在window全局下就存在一个template函数

  • 2.2 定义数据：数据一般是对象
<script>
var data={name:"张三"}
<script>

  • 1
  • 2
  • 3
  • 2.3 定义模板
    模板的id是唯一的
<script type="text/html" id="dyId">
<h1>{{定义数据对象的属性名 name}}  {{第二个数据}}</h1>
</script>

  • 1
  • 2
  • 3
  • 2.4 调用template函数
    template(“调用的模板的id名”，定义的数据)
var htmlStr=template("dyId",data);//返回值就是我们替换之后的模板了

  • 1
  • 2.5 渲染HTML结构
    进行dom操作：
<div class="cont">页面结构</div>   页面上的容器
渲染数据：$('.cont').html(htmlStr);//页面显示结果是“页面结构  张三”

  • 1
  • 2

书写顺序：导入—页面容器—定义模板—定义数据—调用模板—渲染结构
在atr-template模板引擎中，所有的语法都要有闭合标签
3. 标准语法-输出：双花括号 {{}}，可以输出变量、对象属性、三元表达式、逻辑判断、加减乘除
4. 原文输出：value值中包含HTML标签，需要使用原文输出来解析HTML标签 {{@ value}}
5. 标准语法-条件输出
条件输出
6. 标准语法-循环输出

第一种方式
{{each  遍历的循环项 item  key}}
{{item}}循环项 {{key}}索引
{{/each}}

第二种方法
{{each 遍历的循环项}}
{{$index}}循环的索引
{{$value}}循环的值
{{/each}}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  1. 标准语法—过滤器（本质就是一个函数）
    {{需要过滤的值value | 调用的（过滤器)函数名filteName}}，上一个的输出做为下一个的输入。中间用管道符隔开
  • 7.1定义过滤器的基本语法：template.defaults.imports.（过滤器的名字）filteNmae=function(value) {return 处理的结果}
  • 定义一个时间的过滤器
 // 定义过滤器
    template.defaults.imports.dateFormat=function(dtStr) {
      var dt=new Date(dtStr);
      var y=dt.getFullYear();
      var m=pad(dt.getMonth()+1);
      var d=pad(dt.getDate())
      var hh=pad(dt.getHours());
      var mm=pad(dt.getMinutes());
      var ss=dt.getSeconds();
      return `${y}-${m}-${d}${hh}:${mm}:${ss}`
      // return y+'-'+ m +'-' +d+ hh+':'+mm +':' +ss;
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

标题3 XMLHttpRequest使用

  1. 使用xhr发起不带参数的get数据请求
    创建步骤：
  • 1.1 创建xhr对象var xhr=new XMLHttpRequest()
  • 1.2 调用open函数 ，指定请求地址与URL地址 xhr.open('GET','URL地址')
  • 1.3调用send函数，发起Ajax请求 xhr.send()
  • 1.4 监听onreadystatechange事件
xhr.onreadystatechange=function() {
//监听xhr对象的请求状态readystate；与服务器响应状态status
if(xhr.readyState ===4 && xhr.status===200) {
console.log(xhr.responsetText);//打印服务器响应回来的数据
}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

xhr里面的readyState属性，用来表示当前Ajax请求所处的状态
0：对象已经创建，但未调用open方法
1：open()方法已经调用
2：send方法已经被调用 ，响应头也已经被接收
3：数据接收中，此时response属性中已经包含部分数据
4：Ajax请求完成，这意味着数据传输已经彻底完成或失败

  1. 发起带有参数的get请求
  • 2.1 在URL地址‘？’后面拼接的字符串，被称为查询字符串
  • 2.2 xhr.open('GET','http://liulongbin:3006/api/getbooks?id=2');//id是参数，跟在？后面，多个参数**id=2&uname=zhangsan**
  1. URL编码与解码
  • 3.1 编码函数 encodeURI()
  • 3.2 解码函数 decodeURI()
  1. 使用xhr发起post请求
  • 4.1 创建xhr对象
    var xhr=XMLHttpRequest()
  • 4.2 调用xhe.open函数
    xhr.open('POST','URL地址')
  • 4.3 设置Content-Type属性（固定写法）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

  • 1
  • 4.4 调用send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵')

  • 1
  • 4.5 监听onreadystatechange事件
xhr.onreadystatechange=function() {
//监听xhr对象的请求状态readystate；与服务器响应状态status
if(xhr.readyState ===4 && xhr.status===200) {
console.log(xhr.responsetText);//打印服务器响应回来的数据,并且是一个字符串
}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

标题4 数据交换格式JSON

  1. 概念：就是服务器与客户端直接按进行数据传输与交换的格式，前端领域，最常见的两种是XML和JSON.
  2. JSON
  • 2.1 概念：就是JavaScript对象和数组的字符串表示法，JSON的本质就是字符串
  • 2.2 JSON的两种结构：对象结构和数组结构
  • 2.2.1 对象结构: {key:value} key必须是使用英文的双引号包裹的，value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型 ，不允许出现undefined和function{"hobby":["吃饭","睡觉"]}
  • 2.2.2 数组结构：["java","python","php"]
    注意事项：属性名必须使用双引号包裹
    字符串类型的值必须使用双引号包裹
    JSON中不允许使用单引号表示字符串
    JSON不能写注释
    JSON的最外层必须是对象或者数组形式
    不能使用undefined和函数做为JSON的值
  1. JSON和JS对象的互转
  • 3.1 JSON字符串转换成JS对象JSON.parse('待转换的字符串') 反序列化
  • 3.2 JS对象转换成JSON字符串JSON.stringify() 序列化
  // 把对象转换成字符串
        var b={a:"nihao",b:"转换",c:"字符串"}
        var t=JSON.stringify(b);
        console.log(t);//结果{"a":"nihao","b":"转换","c":"字符串"}
        // 把字符串转换成对象
        var s='{"a":"hello"}'
        var f=JSON.parse(s);
        console.log(f);//{a: "hello"}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

标题5 封装自己的Ajax

  1. 定义option参数选项
  • method 请求的类型（判断请求类型是get还是post）
  • url 请求的URL地址
  • data 请求携带的参数
    传入的data对象要转换成查询字符串的形式
function resoveData(data) {
var arr=[]
for(var k in data) { 
var str=k +'=' +data[k]
arr.push(str)
}
return arr.join('&')
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • success 请求成功之后的回调函数
    整体的使用步骤如下所示：
 <script>
        // 使用自己封装的Ajax
         myAjax({
        method:'GET',
        url:'http://www.liulongbin.top:3006/api/news',
        data:{
            id:1
        },
        success:function(res) {
            console.log(res);
        }
    })
        // 1.把传入的data数据转化成查询字符串
        function resolveStr(data) {
            var arr=[]
            for(let k in data) {
                var str=k+'='+data[k]
                arr.push(str)
            }
            return arr.join('&');
        }
        // 2.封装自己的Ajax
        function myAjax(options) {
            var xhr=new XMLHttpRequest();
            var qs=resolveStr(options.data);//传入的数据
            // 2.1判断请求类型
            if(options.method.toUpperCase()=== 'GET') {
                xhr.open(options.method,options.url+'?'+qs)
                xhr.send()
            }else if(options.method.toUpperCase()==='POST') {//toUpperCase()输入的字母变成大写
                xhr.open(options.method,options.url)
                xhr.setRequestHeader('Content-Type','application/x-www-form=urlencoded')
                xhr.send(qs)
            }
            // 2.2监听onreadystatechange事件
            xhr.onreadystatechange=function() {
               if(xhr.readyState === 4 && xhr.status ===200) {
                  var result=JSON.parse(xhr.responseText)
                  console.log(result);
               }
            }
        }
    </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

标题6 XMLHttpRequest Level2的新特性

  1. 可以设置请求时限 xhr.timeout=3000 timeout属性和事件xhr.timeout=functon() {超时之后调用的函数}
  2. FormData对象管理表单数据
  • 2.1 创建FormData对象实例 var fd=new FormData()
  • 2.2调用append函数，向实例中追加数据fd.append('uname','zs')
  • 2.3 创建xhr对象var xhr=new XMLHttpRequest()
  • 2.4 指定请求类型与url地址xhr.open('get',url地址)http://www.liulongbin.top:3006/api/formdata
  • 2.5 直接提交FormData对象，这与提交网页表单的效果，完全一样
    注：formData对象不能用get请求。在进行post请求时，不需要设置请求头
xhr.send()

  • 1

FormData也获取表单元素的值：获取表单元素，var fd=new FormData(form)form是通过表单元素中的name属性来获取的

<---ui结构--->
 <form action="" id="fd">
    <input type="text" id="uname" name="uname">
    <input type="password" name="number" id="phone">
    <button type="submit">提交</button>
   </form>

var form=document.querySelector('form');//这里的form只能用原生的js来获取，不能使用jQuery
      // var form=$('#fd')
      $("form").submit(function (e) { 
        e.preventDefault();
      var fd=new FormData(form);
      var xhr=new XMLHttpRequest();
     xhr.open('post','http://www.liulongbin.top:3006/api/formdata')
     xhr.send(fd);
     xhr.onreadystatechange=function() {
       if(xhr.readyState === 4 && xhr.status === 200) {
         console.log(JSON.parse(xhr.responseText));
       }
     }
    });//打印结果是测试表单结果成功，data里面存储的是网页表单元素的内容，也就是自己输入的内容

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

FormData的实例方法：

    1. 获取表单对象中属性的值(如果key存在则读取它的值，如果不存在则返回null)
      formData.get('key');
    1. 设置表单对象中属性的值，key存在就覆盖原来的，不存在就设置
      formData.set('key', 'value');
    1. 删除表单对象中属性的值
      formData.delete('key');
    1. 向表单对象中追加属性值，注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。
      formData.append('key', 'value');
  1. 上传文件
    实现步骤：
  • 3.1定于UI结构；
 <input type="file" name="" id="file1">
  <button id="btnUpload">上传文件</button>
  <img src="" alt="">

  • 1
  • 2
  • 3
  • 3.2验证是否选中了文件；files是input文件上传框获取上传文件列表的一个属性，返回的是一个数组形式，这个属性只能在原生JS里面使用，jQuery元素不能使用
//1.获取文件上传按钮
var btn=document.querySelector("#btnUpload")
//2.为按钮绑定点击上传事件
btn.addEventListener('click',function() {
//3.获取到用户选中的文件列表
var files=document.querySelector('#file1').files
if(files.length <= 0) {
return alert("请选择要上传的文件")
}
//。。。。。后续业务逻辑
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 3.3向FormData中追加文件；向http FormData对象中追加元素，使用appen()有两个属性，一个是名称，一个是值avatar是自定义的名称
var fd=new FormData();
fd.append('avatar',files[0])

  • 1
  • 2
  • 3.4使用xhr发起上传文件的请求；
var xhr=new XMLHttpRequest();
xhr.open('post',url地址);
xhr.send(fd)

  • 1
  • 2
  • 3
  • 3.5监听onreadystateschange事件
xhr.onreadystatechange=function() {
//监听xhr对象的请求状态readystate；与服务器响应状态status
if(xhr.readyState ===4 && xhr.status===200) {
document.querySlector("#img").src='请求的根路径'+data.url
}else {
console.log(data.message)}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  1. 可以获取数据传输的进度信息
    xhr.upload.onprogress事件 中的事件对象
    e.lengthComputable 是一个布尔值，表示当前上传资源是否具有可计算的长度
    e.loaded 已传输的字节
    e.total需要传输的总字节
    上传的进度：（e.loaded/e.total）*100 返回的是一个数值

标题7 jQuery的高级用法

jQuery文件上传
使用Ajax请求，ContentTyp和processData两个属性必须设置

  1. contentType:false不修改Content-Type属性，使用Formdata中原有的
  2. processData:false
  3. 两个监听Ajax开始结束事件 $(document).ajaxStart(callback)会监听当前文档下的所有Ajax请求 和ajaxStop(callback)

标题 8 axios

只专注于网络数据请求，更加轻量化
1.
axios.get(‘url’,{params:{参数}}).then(callback)

var url='http://www.liulongbin.top:3006/api/get',
        var paramData={name:'zs',sex:"男"};
        // axios发起get请求
        axios.get(url,{params:paramData}).then(function(res) {
            console.log(res.data);//服务器响应回来的数据res.data
        });
      //  2.post请求方式的唯一不同之处在于参数的书写方式
        axios.post(url,paramData).then(function(res) {
            console.log(res.data);
        })
    // 3.综合写法
        axios({
            method:'',
            url:'',
            params:{get请求参数},
            data:{post请求参数}
        }).then(function(res) {console.log(res.data);})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

标题9 跨域与JSONP

  1. 同源策略和跨域
  • 1.1 同源
    概念：两个页面的协议、域名和端口都相同，叫做相同的源；端口如果不写默认是80
  • 1.2 跨域出现的根原因：浏览器同源策略不允许非同源的URL之间进行资源的交互。浏览器在服务器返回数据的时候被同源策略所拦截
  1. 解决跨域问题
  • 2.1 两种解决方案：JSONP和CORS,JSONP是前端程序员自己写的，只支持GET请求，不支持发起POST请求。CORS属于W3C标准，属于跨域Ajax请求的根本解决方案。两个请求都支持
  1. JSONP
    script标签的src属性不受同源策略影响，所以可以通过src属性来请求接口
  • 3.1 JSONP实现的原理：就是通过script标签的src属性，请求跨域的数据接口，并通过函数调用的形式接收跨域响应回来的数据
    src属性里面需要放非同源的接口地址，并且传入参数为函数调用的形式callback=定义的函数名，来实现JSONP
//定义本地的一个函数
function add(data) {
console.log(data)
}
<script src='http://ww.liulongbin.top:3006/api/getbooks?callbck=add'>
//http://ww.liulongbin.top:3006/api/getbooks?callbck=调用自定义的函数名（add）
</script>//非同源接口要返回一个函数调用，这个函数已经在本地写好了

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  1. jQuery中的JSONP请求：只需要
    缺点：只支持get请求，不支持post请求
$.ajax({
method:'',
url:'',
jsonp:'callback',
jsonpCallback:'abc'默认是找的success
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

填写属性dataType:'jsonp'
发送到服务端的参数名称，jsonp:‘callback’
自定义的回调函数名称，默认jQueryXXXX格式
jsonpCallback:‘abc’

http://ww.liulongbin.top:3006/api/getbooks?jsonp?name=zs&&pwd=123

  • 1

解决跨域的方法：JSONP、CORS、服务器代理

标题9 节流和防抖

  1. 防抖
    防抖策略概念：当事件被触发之后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新开始计时。
    为了让事件只执行一次，提高浏览器的性能
    应用场景：淘宝商城搜索商品，输入内容下面会出现与关键词相关的商品，只有用户在规定时间内确定输入内容时下方才会出现https://suggest.taobao.com/sug?q=’ + kw，kw是获取用户输入的内容，当作参数处理
  //1. 定义防抖
        var timer=null;
    //定义延时器的id
        function debounceSearch(kw) {
            timer=setTimeout(function() {
              alert(11);//这里是防抖执行的最后事件
            },500)
        }
    //  3.定义事件触发
       $("input").on("keyup", function () {
          clearTimeout(timer);//如果时间没到500，就清除上一次的延时器，不执行回调,也就不会弹出11
          debounceSearch(kw);//在用户最后确定输入结果时，才会发起请求，避免了多次请求
       }  

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

比如淘宝的搜索框，如果用户每一次输入内容都在500毫秒内，那么前几次输入的内容不会发起请求，只有在最后一次才会发起请求。原因是用户触发了鼠标按下事件，这个事件不会立即执行，会在500毫秒之后执行，但是用户在500毫秒内又触发了鼠标按下事件，所以要重新开始计时。直到用户在500毫秒内不再触发鼠标按下事件，才会执行回调函数，也就是才会向服务器发起请求

  1. 节流
    节流：鼠标连续不断的触发某事件，只在单位时间只触发一次
    节流阀：节流阀为空，表示可以执行下一次操作；不为空，表示不能执行下次操作
    防抖和节流的区别：
    防抖：如果事件被频繁触发，防抖能保证只有最后一次触发，前N多次的触发都会被忽略。节流能够减少事件触发的频率，因此，节流是有选择的执行一部分事件

标题10 状态码

  1. 2** 响应成功的状态码
  • 200 请求成功，一般用于get和post请求
  • 201 请求成功并且创建了新的资源，一般用于post请求和put请求
  1. 3** 重定向相关的响应状态码。表示服务器要求客户端进行重定向
  • 301 请求资源已被永久移动到新的URL，返回信息会包括新的URL，浏览器会自动定向新的URL
  • 302 与301类似，但是资源只是被临时移动，客户端应继续使用原有的URL
  • 304 未修改。所请求的资源未修改，客户端通常会缓存访问过的资源
  1. 4** 客户端错误相关的响应码，与服务端没有关系
  • 400 语义有误或者请求参数有误
  • 401 当前请求需要用户验证
  • 403 服务器已经理解请求，但是拒绝执行它
  • 404 服务器无法根据客户端的请求找到资源，一般情况下是路径不正确
  • 405 请求接口的不正确
  • 415 需要更换请求类型中的Content-Type属性
  • 408 请求超时
  1. 5** 服务器错误相关的状态码
  • 500 服务器内部错误，无法完成请求
  • 501 服务器不支持该请求方法
  • 503 由于超载或系统维护，服务器暂时无法处理客户端的请求
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/100670
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号