当前位置: 首页 > article >正文

Ajax:原生ajax、使用FormData的细节问题,数据的载体

人生海海,山山而川,不过尔尔;空空而来,苦苦而过,了了而去

文章目录

          • 原生ajax
          • 使用FormData的细节问题
          • 数据的载体

原生ajax
  • 执行顺序
    1. 创建xhr对象 var xhr = new XMLHttpRequest()
    2. 调用xhr.open('请求方式', url)函数,设置请求方式和接口地址
    3. 调用xhr.send函数,用于发送请求
    4. 监听xhr.onreadystatechange事件,获取接口返回的结果
  • 关于readyState属性
    • readyState的值有5个,分别是0-4,该属性表示ajax请求过程中的5个不同的状态
    • 我们关心的是xhr.readyState===4的时候,因为这个时候浏览器端可以准确的完整的接收到服务器返回的数据
  • 带参数的GET请求
    • xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=3') 多个参数用&符号隔开
  • POST请求
    • 参数位置不同,POST请求时提交的数据要当做 xhr.send() 的参数
    • open和send方法之间,需要指定header头
  • 编码中文
    • url中不要出现中文,如查询字符串中有英文,我们最好使用js函数encodeURL()对中文进行编码处理
  • XMLHttpRequest Level 2新特性
    • xhr.onload:在完成ajax请求完毕的时候会触发
    • xhr.reponse:可以接收任何类型的结果
  • xhr配合ForData使用
    1. 获取表单数据
      • 找到表单的dom对象
      • 实例化FormData,参数是前面得到的dom对象
    2. ajax提交到接口
      • 指定POST方式提交到指定的接口
      • 不要写setquestHeader
      • 数据当做send的参数直接使用即可
使用FormData的细节问题
  • 注意事项
    • 表单各项(input/select/textarea)必须有name属性,因为FormData就是根据name属性来收集数据的
    • 找form表单的时候一定要用dom对象
    • 发送ajax请求的时候必须使用POST方式
    • 接口必须使用指定的接口
  • API
    • get('username'):判断FormData对象中的username的值
    • has('username'):判断FormData对象中是否有username
    • append('time',Data now()):向FormData对象中追加一条数据
数据的载体
  • JSON (JavaScript Object Notation )
    • 作用:json是一种超轻量级的数据交换格式 (实际上是JavaScript的子集)
    • 注意事项
      • 属性名必须要用双引号包裹
      • 字符串类型的值必须用双引号包裹
      • json中不能写注释
      • json的最外层必须是对象或数组格式
      • 不能使用undefined或函数作为json的值
    • 序列化:即把js对象转成json格式的字符串的过程,使用方法为 JSON.stringify()
      var xiaoming = {
        name: '小明',
        age: 12,
       	gender: true,
        height: 165,
        grade: null,
        'middle-school': 'Middle School',
        skills: ['Javascript', 'Java', 'Python', 'Lisp']
      }
      var res = JSON.stringify(xiaoming)
      console.log(res)
      // 运行结果: {"name":"小明","age":12,"gender":true,"height":1.65,"grade":null,"middle-school":"Middle School","skills":["Javascript","Java","Python","Lisp"]}
      // 如果要输出好看一些的话, 可以加上参数,按缩进输出 JSON.stringify(xiaoming, null, ' ')
      // 运行结果:{
                    "name": "小明",
                    "age": 14,
                    "gender": true,
                    "height": 1.65,
                    "grade": null,
                    "middle-school": "Middle School",
                    "skills": [
                      "JavaScript",
                      "Java",
                      "Python",
                      "Lisp"
                    ]
                  }
      // 第二个参数用于控制如何筛选对象的赋值,如果只想输出指定的属性,可以传入Array:JSON.stringify(xiaoming, ['name', 'skills'], ' ')
      // 运行结果:  {
                    "name": "小明",
                    "skills": [
                      "JavaScript",
                      "Java",
                      "Python",
                      "Lisp"
                    ]
                  }
      // 其中第三个参数
      	1.如果省略的话显示出来的值就没有分隔符,直接输出来
      	2.如果是一个数字的话定义的是缩进几个字符,如果大于10,则默认为10,因为最大值为10
      	3.如果是一些转义字符,比如'\t',表示回车,那么它每行一个回车
      	4.如果仅仅是字符串,就在每行输出值的时候就把这些字符串附加上去,最大长度也是10个字符
      
  • 反序列化:即把json格式的字符串转成js对象的过程,使用方法为 JSON.parse()
    var res = JSON.parse('[1,2,3,true]')
    console.log(res) // [1,2,3,true]
    var res = JSON.parse('{"name": "小明", "age": 14}')
    console.log(res) // {name: '小明', age:14}
    var res = JSON.parse('true')
    console.log(res) // true
    var res = JSON.parse('123.45')
    console.log(res) // 123.45
    // 还可以接收一个函数,用来转换解析出的属性
    var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
      if (key === 'name') {
        return value + '同学'
      }
      return value
    })
    console.log(JSON.stringify(obj)) // {"name":"小明同学","age":14}
    

http://www.kler.cn/a/354223.html

相关文章:

  • GitLab的安装与卸载
  • 知识图谱+RAG学习
  • Spring Boot 配置Kafka
  • python使用pip进行库的下载
  • Unity 6 Preview(预览版)新增功能
  • k8s迁移——岁月云实战笔记
  • C#Process进程的使用,以及对ProcessInfo中所有的参数详细记录
  • java中,深克隆和浅克隆怎么用,有什么应用场景?-----面试题分享
  • 对比长安链、FISCO BCOS、蚂蚁链
  • [实时计算flink]作业开发上线流程及规范
  • LabVIEW离心泵振动监控与诊断系统
  • 数字后端零基础入门系列 | Innovus零基础LAB学习Day2
  • 【数据分析】数据分析的流程是怎么样的?
  • R3:LSTM-火灾温度预测
  • python 爬虫 入门 二、数据解析(正则、bs4、xpath)
  • redis--Mysql和redis数据一致性问题(延时双删)
  • OpenAI的新功能Canvas,效果还不错
  • Failed to connect to github.com port 443
  • 安全风险评估(Security Risk Assessment, SRA)
  • sql的使用
  • 蛋白质残基的距离计算以及径向基函数变换中的维度变化
  • 第21~22周Java主流框架入门-Spring 2.SpringAOP面向切面编程
  • 潜水定位通信系统的功能和使用方法_鼎跃安全
  • SpringBoot+Vue+Uniapp智能社区服务小程序系统(源码+lw+部署文档+讲解等)
  • 前缀和--一维和二维模板
  • 【MySQL】索引的机制、使用