襄阳市建设公司网站,wordpress页面直接跳转,国内erp公司排名,中小企业网站用什么技术人生海海#xff0c;山山而川#xff0c;不过尔尔#xff1b;空空而来#xff0c;苦苦而过#xff0c;了了而去 文章目录 原生ajax使用FormData的细节问题数据的载体 原生ajax
执行顺序 创建xhr对象 var xhr new XMLHttpRequest()调用xhr.open(请求方式, url)函数#… 人生海海山山而川不过尔尔空空而来苦苦而过了了而去 文章目录 原生ajax使用FormData的细节问题数据的载体 原生ajax
执行顺序 创建xhr对象 var xhr new XMLHttpRequest()调用xhr.open(请求方式, url)函数设置请求方式和接口地址调用xhr.send函数用于发送请求监听xhr.onreadystatechange事件获取接口返回的结果 关于readyState属性 readyState的值有5个分别是0-4该属性表示ajax请求过程中的5个不同的状态我们关心的是xhr.readyState4的时候因为这个时候浏览器端可以准确的完整的接收到服务器返回的数据 带参数的GET请求 xhr.open(GET, http://www.liulongbin.top:3006/api/getbooks?id3) 多个参数用符号隔开 POST请求 参数位置不同POST请求时提交的数据要当做 xhr.send() 的参数open和send方法之间需要指定header头 编码中文 url中不要出现中文如查询字符串中有英文我们最好使用js函数encodeURL()对中文进行编码处理 XMLHttpRequest Level 2新特性 xhr.onload在完成ajax请求完毕的时候会触发xhr.reponse可以接收任何类型的结果 xhr配合ForData使用 获取表单数据 找到表单的dom对象实例化FormData参数是前面得到的dom对象 ajax提交到接口 指定POST方式提交到指定的接口不要写setquestHeader数据当做send的参数直接使用即可
使用FormData的细节问题
注意事项 表单各项input/select/textarea必须有name属性因为FormData就是根据name属性来收集数据的找form表单的时候一定要用dom对象发送ajax请求的时候必须使用POST方式接口必须使用指定的接口 API get(username)判断FormData对象中的username的值has(username)判断FormData对象中是否有usernameappend(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]}
// 第二个参数用于控制如何筛选对象的赋值如果只想输出指定的属性可以传入ArrayJSON.stringify(xiaoming, [name, skills], )
// 运行结果 {name: 小明,skills: [JavaScript,Java,Python,Lisp]}
// 其中第三个参数1.如果省略的话显示出来的值就没有分隔符直接输出来2.如果是一个数字的话定义的是缩进几个字符如果大于10则默认为10因为最大值为103.如果是一些转义字符比如\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}
