Ajax - 使用 XMLHttpRequest 发起请求 - get / get带参 / post （原生）
1. 使用XMLHttpRequest发起get无参请求 (原生方法)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />&l
·
1. 使用XMLHttpRequest发起get无参请求 (原生方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button>请求所有英雄列表数据</button>
<script>
document.querySelector('button').onclick = function() {
// $.ajax({
// type:请求方式，
// url:请求地址,
// data:请求参数
// success:请求成功的回调，
// dataType:预期的数据类型
// })
// 1.创建一个异步对象
let xhr = new XMLHttpRequest()
// 2.发起异步请求： 以什么方式，向什么地址发起请求，要不要传递参数
// 2.1 设置请求方式 和 请求url地址
xhr.open('get', 'http://127.0.0.1:3001/getHeroList')
// 2.2 发起请求
xhr.send()
// 3.接收响应：如果请求成功，就会自动的触发xhr的onload事件，在这个事件中可以获取后台所返回的数据
xhr.onload = function() {
console.log(xhr.responseText)
console.log(typeof xhr.responseText)
console.log(JSON.parse(xhr.responseText))
}
console.log('console.log(xhr.responseText)-----', xhr.responseText) // 没有结果
}
</script>
</body>
</html>
2. 使用XMLHttpRequest发起get带参请求 (原生方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<input type="text" class="heroname" />
<button>查询指定名英雄数据</button>
<script>
document.querySelector('button').onclick = function() {
// 获取英雄数据
let heroname = document.querySelector('.heroname').value
// 1.创建异步对象
let xhr = new XMLHttpRequest()
// 2.设置请求方式和请求url,get请求如果有参数，需要在url中进行拼接,否则相当于没有传递参数
xhr.open('get','http://127.0.0.1:3001/getHeroList?heroName=' + heroname)
// xhr.open('get','http://127.0.0.1:3001/getHeroList')
// 发起请求
xhr.send()
// 3.接收响应，请求成功自动触发的事件
xhr.onload = function() {
console.log(xhr.response)
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
3. 使用异步对象发起 post 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>post请求示例</title>
</head>
<body>
英雄名: <input type="text" class="cname" /> <br />
英雄皮肤名称: <input type="text" class="skin_name" /> <br />
<button>添加英雄及皮肤</button>
<script>
document.querySelector('button').onclick = function(){
// 获取-收集用户数据
let cname = document.querySelector('.cname').value
let skin_name = document.querySelector('.skin_name').value
// 1.创建异步对象
let xhr = new XMLHttpRequest()
// 2.发起post请求
// 2.1 设置请求方式和请求地址
// 注意，post请求的参数不要在url中拼接，拼接了也没有用
xhr.open('post','http://127.0.0.1:3001/addHeroSkin')
// 2.2 设置请求头,作用是设置参数的编码格式，以便后台能够正确的接收所传递的参数
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 2.3 发起请求，post请求所传递的参数在send函数中传递，格式为key=value&key=value
xhr.send(`cname=${cname}&skin_name=${skin_name}`)
// xhr.send({cname,skin_name})//这里会错误
// 3.接收响应
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)