一、创建Ajax
let req = new XMLHttpRequest();
二、发送请求
req.open('POST','asses/test/city.json',false);//发送请求
req.send();//将请求发送到服务器上
open(method,ul,async)有三个参数;
1、请求类型:GET和POST。
2、请求文件的地址。
3、true(异步)或 false(同步)
三、请求得到响应返回数据
if (req.readyState === 4 && req.status === 200){
let tes = JSON.parse(req.responseText);//处理返回的数据
console.log(tes);
}else {
document.write('错误');
}
1、responseText:获得字符串形式的相应数据。
2、responsXML:获得XML形式的相应数据。
3、status:以数字和文本形式返回http状态码。
(1)200:成功。
(2)404:页面未找到。
4、readyState属性:响应返回成功的时候得到通知。
(1)0:请求未初始化,open还没有调用。
(2)1:服务器连接已建立,open已经调用了。
(3)2:请求已经接收,也就是接收到头信息了。
(4)3:请求处理中,也就是接收到响应主体了。
(5)4:请求已完成,且响应已就绪,也就是响应完成了。
四、jQuery方法
$.ajax({
type: 'post',//请求类型
url: 'asses/test/city.json',//文件地址
async: false,//异步(同步)
dataType: 'json',//文件类型(json)
success:function (value) {//成功执行函数
data = value;
},
error:function (e) {//失败执行函数
console.error(e);
}
});
很方便,代码简单,但还是支持写原生的。
html
<div style="width: 610px;margin: 20px auto;">
<div style="margin-bottom: 10px;"><h3>选择所在地</h3></div>
<select id="capital">
<option>请选择省会</option>
</select>
<select id="cit">
<option>请先选择省会</option>
</select>
<select id="county">
<option>请先选择区县</option>
</select>
</div>
js
let capital = $('#capital');
let cit = $('#cit');
let county = $('#county');
let data = [];
let arr;
// 原生js创建Ajax请求
/*let req = new XMLHttpRequest();//创建Ajax对象
req.open('POST','asses/test/city.json',false);//发送请求
req.send();//将请求发送到服务器上
if (req.readyState === 4 && req.status === 200){
let tes = JSON.parse(req.responseText);//处理返回的数据
console.log(tes);
}else {
document.write('错误');
}*/
// jQuery创建Ajax请求
$.ajax({
type: 'post',
url: 'asses/test/city.json',
async: false,
dataType: 'json',
success:function (value) {
data = value;
},
error:function (e) {
console.error(e);
}
});
//生成第一个select的option
for (let i=0;i<=data.length-1;i++){
let op = $('<option value="' + i + '">' + data[i].name + '</option>');
capital.append(op);
}
//根据第一个点击来生成第二个select的option
capital.change(() =>{//省会改变
cit.empty();//清空cit的option
county.empty();//清空county的option
if (capital.val() == '请选择省会'){
let op = $('<option>请先选择省会</option>');
let op2 = $('<option>请先选择城市</option>');
cit.append(op);
county.append(op2);
}else {
arr = data[capital.val()].city;
for (let i=0;i<=arr.length-1;i++){
let op = $('<option value="' + i + '">' + arr[i].name + '</option>');
cit.append(op);
}
let b = arr[cit.val()].area;
for (let i=0;i<=b.length-1;i++){
let op = $('<option value="' + i + '">' + b[i] + '</option>');
county.append(op);
}
}
});
//根据第二个点击来生成第三个select的option
cit.change(() =>{//城市改变
county.empty();
let b = arr[cit.val()].area;
for (let i=0;i<=b.length-1;i++){
let op = $('<option value="' + i + '">' + b[i] + '</option>');
county.append(op);
}
})
这是我在学习js的时候做的一些小练习,我把它分享给大家,谢谢!