自己做网站能赚钱吗,注册网店需要多少费用,营销技巧的重要性,织梦导入wordpressAjaxJSON学习二 文章目录 前言三、前后端数据交互3.1. GET请求3.2. POST请求3.3. jQuery 中的 Ajax3.4. Ajax 的替代品#xff1a;fetch3.5. 小结 四、JSON4.1. JSON简介4.2. JSON 语法规则4.3. JSON的解析和序列化 总结 前言 三、前后端数据交互
3.1. GET请求 GET 请求一般用… AjaxJSON学习二 文章目录 前言三、前后端数据交互3.1. GET请求3.2. POST请求3.3. jQuery 中的 Ajax3.4. Ajax 的替代品fetch3.5. 小结 四、JSON4.1. JSON简介4.2. JSON 语法规则4.3. JSON的解析和序列化 总结 前言 三、前后端数据交互
3.1. GET请求 GET 请求一般用于信息获取它没有请求主体而是使用 URL 传递参数即传递数据给后台。 GET 传递参数的方式分两步
对所需发送的数据具有名称和值执行普通的 URL 编码即由一对对 “名称值” 组成称为名/值对每一对之间用 “” 拼接如 “namevaluenamevalue…namevalue”由于 名/值对 会附加在 URL 地址后面因此在这串字符参数的最前面需要添加个 “?”表示 URL 的 查询参数 开始。
// GET请求的后端接口
var url /statics/demosource/demo_get_json.php;// 获取用户输入的表单数据
var country document.getElementById(country).value,city document.getElementById(city).value;// 将需要传递的参数拼接为 名称值 对的形式
var query country country city city;// 在 query 前面添加个 ?再拼接后端接口
var queryURL url ? query;// 发起GET请求使用拼接好的 queryURL
ajaxGet(queryURL);扩展因 JavaScript 对象数据是键值对的形式它与上述的名值对具有类似的性质因此在 Ajax 的应用中传递的数据通常直接来自一个 JavaScript 对象这时只需遍历这个 JavaScript 对象将每一个键值对按 “名称值” 的形式进行拼接即可。
function urlencodeData (data) {if (!data) return ;var pairs []; // 存储名/值对for (var name in data) {if (!data.hasOwnProperty(name)) continue; // 如果是继承属性则跳过if (typeof data[name] function) continue; // 如果是方法则跳过// 将 null 与 undefined 改为空字符串var value (data[name] null || data[name] undefined) ? : data[name].toString();// encodeURIComponent 用于对空格、中文等特殊字符进行 URI 编码pairs.push(encodeURIComponent(name) encodeURIComponent(value));}return pairs.join();
}3.2. POST请求 POST 请求一般用于修改服务器上的资源它需要发送一个请求主体客户端传递给服务器的数据就包含在这个请求主体中。 前置知识Content-Type请求头用于设置请求主体的编码格式。
POST 请求使用 表单编码 的方式来发送数据的关键步骤
对所需发送的数据具有名称和值执行普通的 URL 编码即像 GET 请求那样拼接为 名/值 对的形式将Content-Type请求头的值设置为application/x-www-form-urlencoded。 JSON 是一种轻量级的前后端数据交换格式直接使用JSON.stringify原生 API 即可实现 JSON 编码比表单编码的方式更加快捷。 POST 请求使用 JSON编码 的方式来发送数据的关键步骤
“Content-Type请求头的值需要为application/json”对请求主体进行序列化在 JavaScript 中可使用JSON.stringify完成这步操作。
// 获取用户输入的表单数据
var country document.getElementById(country).value,city document.getElementById(city).value;// 将数据转换为 JavaScript 对象
var data {country : country,city : city
}var xhr new XMLHttpRequest();
xhr.onreadystatechange function () {// ... ... 省略事件处理程序
}// 指定 POST 请求
xhr.open(POST, /statics/demosource/demo_json_data.php);// 设置请求主体的编码方法
xhr.setRequestHeader(Content-Type, application/json);// 编码请求主体并发送
xhr.send(JSON.stringify(data));!DOCTYPE html
html langen
headmeta charsetUTF-8titleTryrun 11/title
/head
bodydiv idformlabel forcountry国家input typetext namecountry idcountry/labellabel forcity城市input typetext namecity idcity/label/divhrdiv你查询的国家是span idipt_country/span/divdiv你查询的城市是span idipt_city/span/divbrbutton typebutton idsearch查询/button查询成功后会把你输入的值显示在上方scriptvar oSearch document.getElementById(search),oIpt_country document.getElementById(ipt_country),oIpt_city document.getElementById(ipt_city);oSearch.onclick function () {var country document.getElementById(country).value,city document.getElementById(city).value;var query country country city city;var xhr window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject(Microsoft.XMLHTTP);xhr.onreadystatechange function () {if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300 || xhr.status 304) {var res JSON.parse(xhr.responseText);oIpt_country.innerText res.params.country;oIpt_city.innerText res.params.city;}}}xhr.open(POST, /statics/demosource/demo_post_json.php);xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);xhr.send(query);}/script
/body3.3. jQuery 中的 Ajax jQuery 是一个 JavaScript 工具库它封装了 JavaScript 常用的功能代码包括我们刚刚学完的 Ajax。 jQuery 中Ajax 常见的请求方式有以下几种
$.ajax(url, options) $.get(url, data, callback, dataType) $.post(url, data, callback, dataType) $.getJSON(url, data, callback) $.getScript(url, callback) jQuery元素.load(url, data, callback)
// 使用jQuery发起ajax请求
$.ajax(/statics/demosource/demo_get_json.php, {//请求类型type: GET,//要发送的数据data: {country: country,city: city},//数据格式dataType: json,//请求成功后执行success: function (res) { // res为响应成功返回的数据oIpt_country.innerText res.params.country;oIpt_city.innerText res.params.city;},//请求失败后执行error: function (res) { // 这里的res为响应失败返回的数据alert(请求失败 res.status);}
});3.4. Ajax 的替代品fetch Fetch API 是随 ES6 发展而出现的一个 JavaScript 原生接口与 Ajax 一样允许开发者异步发起 HTTP 请求但却以更加简单明了的调用方式、基于 Promise 的数据处理方式被称作是 Ajax 的替代品。 fetch(/statics/demosource/demo_json_data.php, {method: POST,header: new Headers({Content-Type : application/json}),body: JSON.stringify(data)
})
.then(function (res) {return res.ok ? res.json() : Promise.reject(res);
})
.then(function (data) {oIpt_country.innerText data.country;oIpt_city.innerText data.city;
})
.catch(function (res) {alert(请求失败 res.status);
})
3.5. 小结
通过学习 Ajax明白了XMLHttpRequest对象其实就是 HTTP 规范在客户端 JavaScript 中的实现一次 HTTP 请求就对应着一个XMLHttpRequest实例在这个实例上可以取到 HTTP 协议中规定的各种协议属性。
四、JSON
4.1. JSON简介 JSON JavaScript Object Notation意思是JavaScript 对象表示法是一种轻量级的数据交换格式。 JSON 是 JavaScript 的子集它利用了 JavaScript 中的一些模式来表示结构化数据是在 JavaScript 中读写结构化数据的更好方式。
关于 JSON要明白它只是一种数据格式独立于编程语言虽然与 JavaScript 具有相同的语法形式但并不是只有 JavaScript 才能使用 JSON很多编程语言都有针对 JSON 的解析器和序列化器。
4.2. JSON 语法规则 JSON 的语法可以表示以下三种类型的值 简单值使用与 JavaScript 相同的语法可以在 JSON 中表示number、string、boolean 与 null但 JSON 不支持 JavaScript 中的特殊值undefined对象对象作为一种复杂数据类型 表示的是一组无序的键值对而每个键值对中的值可以是简单值也可以是复杂数据类型的值数组数组也是一种复杂数据类型表示一组有序的值的列表数组的值也可以是任意类型 —— 简单值、对象 或 数组。
注意 JSON字符串 与 JavaScript字符串 的最大区别在于JSON 字符串必须使用 双引号单引号会导致语法错误。
与 JavaScript 的字面量相比JSON 对象的键属性名 必须 加 双引号。
JSON 数组采用的就是 JavaScript 中的数组字面量形式
4.3. JSON的解析和序列化 JSON 对象的方法 JSON.stringify()用于序列化 JavaScript 对象将其转换为 JSON 字符串 JSON.parse()用于解析 JSON 字符串将其转换为 JavaScript 值。 知识点补充解析 JSON 字符串的其它方法 方法一使用 JavaScript 的eval()函数
var obj eval(( json ));因为eval()函数会将传入的字符串当作 JavaScript 代码执行为了防止 JavaScript 对象的花括号{}被误解析为 JavaScript 函数的花括号需要对 JSON 字符串加上圆括号。
方法二巧妙使用 Function 构造函数
var obj new Function(return ( json ))();总结
2023–12-17
