jQuery Ajax 1 - 会coding的HAM

const exp = require('express')
const bodyParser = require('body-parser')
const app = exp()
app.use(exp.static('wwwroot'))
app.use(bodyParser.urlencoded({extended:true}))
app.get('/api/user/login',(req,res)=>{
console.log(req.query)
res.status(200).json({status:'success',message:'登录成功'})
})
// 处理post请求
app.post('/api/user/login',(req,res)=>{
console.dir(req.body)
// req.get获取请求头
console.log(req.get('Connection'))
res.set('Y-school','zhiyou')
// res.set设置响应数据
setTimeout(function() {
res.status(200).json({status:'success',message:'登录成功'})
}, 6*1000);
})
app.listen(3000,function(){
console.log('服务器运行了')
})

<!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>Jquery Ajax</title>
</head>
<body>
<button data-method="get">发起get请求</button>
<button id="btn" data-method ='POST'>发起post请求</button>
<script src="js/jquery.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/ajax-event.js"></script>
</body>
</html>

var button =document.querySelector('button')
// 发送get请求
button.onclick = function(){
$.get('/api/user/login', //请求的地址
{name:'黄海波',password:123456}, //发送数据
// 请求成功时运行的函数。
function(res,ree,ref){
// 第一个参数返回结果的数据对象
// 第二个参数 status包含请求状态
// 第三个参数返回的是XMLHTTPrequest对象
// console.log(res.status)
// console.log(ree)
console.log(ref.responseText)
})
}
// 原生写法比较复杂记得东西比较多
// var xhr = new XMLHttpRequest()
// xhr.onreadystatechange = function(){
// if(xhr.readyState == 4){
// }
// }
// xhr.open()
// xhr.send()
// API Application Programing interface 应用程序编程接口
// 程序员开发时直接使用调用的接口(类对象方法属性事件等 )
// 通过接口（连接点可以将程序员的代码链接到一起）
// 程序员可以使用系统的人功能或者其它功能代码库的功能

console.log($('#btn'))
$('#btn').click(function(){
console.log('cccccccc')
$.post('/api/user/login',
{name:'王宝强',password:'123456'},
function(res,statusText,jqXhr){
alert(res.message)
alert(jqXhr.getResponseHeader('Y-school'))
alert(jqXhr.getResponseHeader('X-Powered-By'))
})
})
// $.post()专门发起post请求
// $.get()专门发起get请求
// 都需要四个参数
// 1 请求地址
// 2 发出的数据如果是get请求会将数据urlencode
// 然后加到url后面支持对象格式的数据
// 3 请求成功的回调函数：
// 1 服务端返回的数据(经过jquery转换的数据不需要再次手动转换)
// 2 Ajax请求的状态 success 表示成功
// 3 JqAjax 是jquery在xhr对象的基础上又增加了一些功能
// 通过第三个参数可以获取响应头及其他通过原生xhr才能
// 获取的数据获取响应头getResponseHeader
// 4 服务端返回的数据类型(通常不用传 jquery会猜测类型)

layer.load(2,{shade:0.5})
// ajax()方法用于执行Ajax请求（异步http）
$.ajax({
// async:false 同步
// accepts:{
// fff:'text/json'
// },
// dataType:'fff',
// accepts 发送的内容类型请求头用于告诉服务器
// 浏览器可以接受服务器返回何种类型的数据
// headers:{
// Accept:"application/json;charset=utf-8"
// },
// dataType预期的服务器响应的数据类型
dataType:'json',
cacle:false,
// 是否允许使用缓存如果使用缓存则有可能
// 不发起请求直接使用上一次对同一个url请求获取数据
// contentType
// 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
// 如果极个别情况下需要使用multipart/form-data则需要修改这个值
// beforeSend:function(){
// // 在这里设置请求头
// alert('发送请求之前会调用')
// }
context:{title:'jquery Ajax',cc:'dd'},//请求成功时回调函数的this指向对象
data:{name:'宝强',password:'123456'},//发送给服务器的数据
// dataFilter:function(data,type){
// // dataFilter处理服务端返回的数据类型
// console.log('ddd' + data)
// alert('正在对服务端返回的数据进行处理')
// if(type == 'json') return JSON.parse(data)
// return data
// // Jquery会自动处理大多数情况下服务端返回的数据
// },
error:function(xhr,status,err){
alert('发起一个错误' + err)
if(err == 'timeout'){
layer.alert('不好意思，网络超时了',{icon:5},function(){
layer.closeAll()
})
}
},
// 请求成功时的回调函数
success:function(data,status,xhr){
console.dir(this)
layer.closeAll()
// 关闭所有弹出层
},
// 自定义请求头
headers:{'Y-School':'wang'},
// success 请求成功时的回调函数
url:'/api/user/login', //请求地址
type:'POST', // 请求方式
// 设置本地的请求超时时间
timeout:5*1000,
})

var ajaxOptions = {
url:'/api/user/login',
data:{name:'wangzihao',password:'1234567'},
success:function(data){
layer.alert(data.message)
},
type:'POST',
timeout:5*1000
}
// 设置每一次请求都是用的参数即全局设置
// 如果某一次请求的参数设置为不同的值则会覆盖全局设置
// 使用全局设置后每一次发起ajax请求都可以少传参数
$.ajaxSetup(ajaxOptions)
// ajaxStart是监听页面上所有的ajax事件
// ajaxError表示ajax请求失败
// ajaxComplete表示ajax请求完成不管是失败还是完成都会complete
$(document).ajaxStart(function(){
layer.load(2)
}).ajaxError(function(){
layer.alert('不好意思，网络超时了',{icon:5},function(){
layer.closeAll()
})
}).ajaxComplete(function(){
console.log('ffffff')
layer.closeAll()
})
$('button').click(function(){
if($(this).data('method') == 'GET'){
$.ajax({type:'GET'})
}
else{
$.ajax({ headers:{'Y-School':'wang'}})
// 发起请求
}
})

发送评论 编辑评论

推荐文章

发送评论编辑评论