网站设计经典案例欣赏,重庆响应式网站建设公司,网站租用,互联网黄页是什么AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的#xff0c;有很多重复的代码#xff0c;这些重复的代码能不能不写#xff0c;能不能封装一个工具类。要发送ajax请求的话#xff0c;就直接调用这个工具类中的相关函数即可。 用J…AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的有很多重复的代码这些重复的代码能不能不写能不能封装一个工具类。要发送ajax请求的话就直接调用这个工具类中的相关函数即可。 用JS发送AJAX请求回顾
!DOCTYPE html
html langen
headmeta charsetUTF-8titleAJAX发送GET POST/title
/head
body
script typetext/javascriptwindow.onloadfunction (){document.getElementById(btn1).onclickfunction(){var xhrnew XMLHttpRequest();xhr.onreadystatechangefunction(){if(this.readyState4){if(this.status200){console.log(发送成功)}}else{console.log(得到错误响应)}}xhr.open(get,/xxxx,true)xhr.send()}document.getElementById(btn2).onclickfunction(){var xhrnew XMLHttpRequest();xhr.onreadystatechangefunction(){if(this.readyState4){if(this.status200){console.log(发送成功)}}else{console.log(得到错误响应)}}var usernamedocument.getElementById(username).valuexhr.open(get,/xxxx?usernameusername,true)xhr.send()}document.getElementById(btn3).onclickfunction(){var xhrnew XMLHttpRequest();xhr.onreadystatechangefunction(){if(this.readyState4){if(this.status200){console.log(发送成功)}}else{console.log(得到错误响应)}}xhr.open(post,/xxxxusername,true)xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)var username2document.getElementById(username2).value;xhr.send(usernameusername2)}}
/scriptbutton idbtn1发送GET无参/buttonbutton idbtn2发送GRT有参/button
input typetext idusernamebutton idbtn3发送POST有参/button
input typetext idusername2
/body
/html响应结果一般是个字符串 也有可能是responseXML
一般现在都用JSON字符串
那么需要转成JS对象
JSON.parse(this.responseText)
使用JQuery工具类中的AJAX方法来发送请求 引入 $.ajax() 是 jQuery 提供的一个通用 AJAX 请求方法.
$.get() 是 $.ajax() 方法的一个简化版本专门用于发送 GET 请求。
$.post() 是 $.ajax() 方法的一个简化版本专门用于发送 POST 请求。 示例
$.get(url, [data], [callback])
$.get(http://www.liulongbin.top:3006/api/getbooks, function(res) {console.log(res) // 这里的 res 是服务器返回的数据
}) $.post(http://www.liulongbin.top:3006/api/addbook, // 请求的URL地址{ bookname: 水浒传, author: 施耐庵, publisher: 上海图书出版社 }, // 提交的数据function(res) { // 回调函数console.log(res)}
) $.ajax()比较通过,可以发送put,delete请求 但是$.get()和$.post()是简化版,暂没有$.put和$.delete的写法
下面来完整的写几个示例 $.get()的写法
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJQuery发送AJAX请求/title
/head
body
!--引入JQuery--
script typetext/javascript srcajax/js/jquery-3.4.1.js/script
script typetext/javascript$(function (){//页面加载完毕执行的函数 JQuery的写法 JS的写法---window.onloadfunction(){}$(#btn1).click(function(){//JQuery写法 JS的写法 document.getElementById(btn1).onclickfunction(){var username$(#username).val()//var usernamedocument.getElementById(username).value;//发送ajax请求$.get(/ajax/JQGET,usernameusername,function(data){console.log(data)$(#div1).html(data)//原来的写法document.getElementById(div1).innerTextdata})})})/script
button idbtn1发送AJAX GET请求/buttonbr
用户名:input typetext idusernamebr
div iddiv1/div
/body
/html
如果不想带参数,就把参数去掉 $.ajax()写法
!DOCTYPE html
html langen
headmeta charsetUTF-8titleAJAX发送GET请求/title
/head
body
script typetext/javascript srcajax/js/jquery-3.4.1.js/script
script typetext/javascript$(function(){//点击事件$(#btn1).click(function(){//发送AJAX请求$.ajax({type:get,url:/ajax/JQGET,data:username$(#username).val(),async:true,success:function(data){console.log(data)$(#div1).html(data)}})})})
/script
button idbtn1发送AJAX GET请求/buttonbr
用户名:input typetext idusernamebr
div iddiv1/div
/body
/html后端随便返回点啥 发送$.post 无参请求 发送$.ajax()post有参数请求 注意
$.get()或者$.post() 方法默认发送的请求是异步的。
如果希望发送的请求可以改变同步或者异步 建议使用$.ajax()这种方式 用$.ajax()方式发送请求的示例
