需要安装Node.js本地测试,本次还需下载layer弹出层插件和jQuery.js
后端index.js:
- 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('服务器运行了')
- })
index.html
- <!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>
index.js
- 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 应用程序编程接口
- // 程序员开发时直接使用调用的接口(类 对象 方法 属性 事件等 )
- // 通过接口(连接点 可以将程序员的代码链接到一起)
- // 程序员可以使用系统的人功能 或者其它功能代码库的功能
post.js
- 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会猜测类型)
ajax.js
- 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,
- })
ajax-event.js
- 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'}})
- // 发起请求
- }
- })