<!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>JQuery中使用AJAX</title>
<!-- 网络导入jQuery -->
<script src="http://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<h1>JQuery中使用AJAX</h1>
<input type="button" value="发送get请求" onclick="test_get()">
<input type="button" value="发送post请求" onclick="test_post()"><br>
<input type="button" value="发送get请求json" onclick="test_get_args_json()">
<input type="button" value="发送get请求str" onclick="test_get_args_str()"><br>
<input type="button" value="发送post请求json" onclick="test_post_args_json()">
<input type="button" value="发送post请求str" onclick="test_post_args_str()">
<input type="button" value="发送post请求放入data" onclick="test_post_json()"><br>
<input type="button" value="发送请求之前beforesend" onclick="test_beforsend()"><br>
<script>
// get请求访问
function test_get() {
$.ajax({
type:'get',
url:'http://httpbin.org/get',
success:(data)=>{
console.log(data);
}
})
}
// post请求访问
function test_post() {
$.ajax({
type:'post',
url:'http://httpbin.org/post',
success:(data)=>{
console.log(data);
}
})
}
// json形式传递
function test_get_args_json() {
$.ajax({
type:'get',
url:'http://httpbin.org/get',
// 传递请求参数,会自动拼接 : "url": "http://httpbin.org/get?name=sxt&pwd=123"
data:{
name:'sxt',
pwd:123
},
success:(data)=>{
console.log(data);
}
})
}
// str形式传递
function test_get_args_str() {
$.ajax({
type:'get',
url:'http://httpbin.org/get',
// 传递请求参数,会自动拼接 : "url": "http://httpbin.org/get?name=sxt&pwd=123"
data:'name=sxt&pwd=123',
success:(data)=>{
console.log(data);
}
})
}
// json形式传递
function test_post_args_json() {
$.ajax({
type:'post',
url:'http://httpbin.org/post',
// 同下,会隐藏请求参数,显示在form中
//form: {name: 'sxt', pwd: '123'} url: "http://httpbin.org/post"
data:{
name:'sxt',
pwd:123
},
success:(data)=>{
console.log(data);
}
})
}
// str形式传递
function test_post_args_str() {
$.ajax({
type:'url: "http://httpbin.org/post"',
url:'http://httpbin.org/post',
data:'name=sxt&pwd=123',
success:(data)=>{
console.log(data);
}
})
}
// 默认情况下data数据放在form下,把data数据以json格式放入data中
function test_post_json() {
$.ajax({
type:'post',
url:'http://httpbin.org/post',
data:JSON.stringify({
name:'sxt',
pwd:123
}),
contentType:'application/json',
success:(data)=>{
console.log(data);
}
})
}
function test_beforsend() {
$.ajax({
type:'get',
url:'http://httpbin.org/get',
// 传递请求参数,会自动拼接 : "url": "http://httpbin.org/get?name=sxt&pwd=123"
data:{
name:'sxt',
pwd:123
},
success:(data)=>{
console.log(data);
},
beforeSend:()=>{
console.log("这是发送请求之前先处理的内容");
// 可以在此函数中控制传送内容,若返回的是false将不会发送请求
return false
}
})
}
</script>
</body>
</html>
129.JQuery中使用AJAX
最新推荐文章于 2024-10-18 19:02:29 发布