js普通ajax数据请求和axios请求数据代码及总结

2023-12-30 05:24:09

//在渲染数据时不能直接写在body下面，否则会出现只能请求一次数据的结果

//数据渲染时用数组forEach的方法

//axios相当于ajax的升级版，原理差不多

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <link rel="stylesheet" href="css/bootstrap.min.css">
??
</head>
<body>
? ?<input type="text"/>
? ?<button>按钮</button>
? ?<script src='../code/js/axios.min.js'></script>
? ?<script>
?? ? ? var text=document.querySelector('input')
?? ? ? var btn=document.querySelector('button')
?? ? ? btn.οnclick=function(){
?? ??? ? ? // var xhr=new XMLHttpRequest()
?? ??? ? ? // xhr.open('get','http://localhost:8888/goods/list')
?? ??? ? ? // xhr.onreadystatechange=()=>{
?? ??? ??? ? ?// ?if(xhr.readyState==4){
?? ??? ??? ??? ? // ? if(xhr.status==200){
?? ??? ??? ??? ??? ?// ? ?console.log(JSON.parse(xhr.responseText))
? ? ?// ? ? ? ? ? ? ?var {list,code}=JSON.parse(xhr.responseText)
?? ??? ??? ??? ? ?
?? ??? ??? ??? ? // ? }
?? ??? ??? ? ?// ?}
?? ??? ? ? // }
?? ??? ? ? // xhr.send()
?? ??? ? ? axios.get('http://localhost:8888/goods/list').then(res=>{
?? ??? ??? ? ? console.log(res)
?? ??? ??? ? ? })
?? ??? ? ??
?? ? ? }
? ?</script>
</body>
</html>

文章来源:https://blog.csdn.net/qq_52840130/article/details/135208400
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。