<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX封装_请求参数</title>
</head>
<body>
<h1>AJAX封装_请求参数</h1>
<input type="button" value="请求数据get" onclick="data_get()">
<input type="button" value="请求数据post" onclick="data_post()">
<script>
function AJAX(options) {
/**
* options:
* type:请求方式
* url:请求地址
* data:请求参数,类型是json
* data注意:在get请求中需要显示在url地址中,作为请求参数;在post请求中,不用写在url地址中
* 所以两种请求需要区分去写
*/
let xhr = new XMLHttpRequest()
// 处理请求参数
let params = ''
for (let key in options.data){
value = options.data[key]
params = params + key + '='+ value + '&'
}
//去掉最后一个&
params = params.substr(0,params.length-1)
//get请求拼接参数(传递参数)
if(options.type == 'get'){
options.url = options.url + '?' +params
}
xhr.open(options.type, options.url)
// post参数请求
if(options.type == 'post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(params)
}else{
xhr.send()
}
xhr.onreadystatechange = ()=>{
if(xhr.readyState ==4 && xhr.status ==200){
console.log(xhr.responseText);
}
}
}
// "url": "http://httpbin.org/get?name=sxt&pwd=123"
function data_get() {
AJAX({
type:'get',
url:'http://httpbin.org/get',
data:{'name':'sxt','pwd':123}
})
}
// "url": "http://httpbin.org/post"
function data_post() {
AJAX({
type:'post',
url:'http://httpbin.org/post',
data:{'name':'sxt','pwd':123}
})
}
</script>
</body>
</html>
126.AJAX封装_请求参数
最新推荐文章于 2022-12-17 11:17:37 发布