js采用ajax发送请求获取数据（实例操作）

来，案例之前，容我分享一下js如何发送请求。

原生js发送请求：

let xhr= new XMLHttpRequest();
// methods：GET/POST请求方式等，url：请求地址，true异步（可为false同步）
xhr.open("methods","url" ,true);
xhr.send();                                            // 发送
xhr.onreadystatechange = function() {                  // 判断if (xhr.readyState == 4 && ajax.status == 200) {   // 成功，接收到数据console.log(xhr.response);                 // 查看返回的数据(可输出 xhr 哈)//JSON.parse(xhr.response);                // 如果数据为字符串的对象，可转换一下}else if(xhr.status == 404) {                  // 失败，页面未找到}}
}

ajax发送请求：

// https://www.bootcdn.cn/        （上面有jquery等开源库，自己引入jquery）$.ajax({type:"",                //请求方式url:"",                 //路径async:true,             //是否异步dataType:"json",        //返回数据的格式success:function(res){  //成功的回调函数console.log(res);    //res代表返回的数据，可以随心所欲处理数据啦}
})

话不多说，上代码 ==>

<!DOCTYPE html>
<html>
<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>Document</title><style>*{margin: 0;padding: 0;list-style: none;}a{text-decoration: none;color: #404040;}header{width: 1000px;height: 40px;line-height: 40px;            margin: 20px auto;font-size: 28px;font-weight: 600;text-align: center;}.box{width: 1000px;margin: 10px auto 0px;}.box::after{content: "";display: block;clear: both;}.boxli{width: 25%;float: left;padding: 20px;box-sizing: border-box;border: 1px solid #eee;}.tupian{display: block;width: 100%;}.title{width: 100%;line-height: 30px;font-size: 26px;font-weight: 600;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.passtime{width: 100%;height: 24px;line-height: 24px;margin: 10px 0;text-align: right;font-size: 18px;}.tuImg{width: 100%;height: 20vh;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script></head>
<body><header> js采用ajax发送请求获取新闻 </header><ul class="box"><!-- <li class="boxli"><a class="tupian" href=""><p class="title"></p><div class="passtime"></div><img src="" alt="" class="tuImg"></a></li> --></ul><script>let box = document.querySelector('.box');$.ajax({type: 'post',url: "https://api.apiopen.top/getWangYiNews",async: true,dataType: "json",success: function(res) {console.log(res);let data = res.result;let html = '';for (let i = 0; i < data.length; i++) {html += "<li class='boxli'>";html += '<a class="tupian" href="'+ data[i].path +'">'html += '<p class="title">'+ data[i].title  +'</p>';html += '<div class="passtime">'+ data[i].passtime +'</div>'html += '<img src="'+ data[i].image +'" alt="'+ data[i].title +'" class="tuImg">'html+= '</a>'html += "</li>"}box.innerHTML = html;}})</script>
</body>
</html>

讲解：

采用ajax的方式发送请求；
通过定义html变量，拼接标签，最后放入ul标签中
- 此处可以采用拼接
- 当然，还有es6的模板引擎 `` 里面直接放标签即可，无需拼接，数据 ${数据}

模板引擎用法（将拼接处代码换成以下代码）：

html += `<li class="boxli"><a class="tupian" href="${data[i].path}"><p class="title">${data[i].title}</p><div class="passtime">${data[i].passtime}</div><img src="${data[i].image}" alt="图片无法显示，请检查网络是否正常" class="tuImg"></a></li>`

在VsCode中，Tab键是往后缩进，Shift+Tab是往前缩进。

该项目接口采用网站为开源社区的API接口文档地址

开源社区

有人恶意刷接口，导致接口调用频繁，接口已经不能稳定运行，所以计划近期下线，积德吧朋友，如果长期如此，所有接口将面临关闭。

所以，不要滥用哈！

更多es6新特性，可以查看我的笔记

作者的es6总结

或者，阮一峰的es6（真正的大牛）

阮一峰的es6

js采用ajax发送请求获取数据（实例操作）相关推荐

JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
Promise相关内容（三）——异步获取服务器数据：promise方式解决回调地狱的问题。通过多个.then使代码可读性更高实现异步任务的串行执行，保证按顺序发送请求获取数据
Promise相关内容(三)--异步获取服务器数据:promise方式解决回调地狱的问题.通过多个.then使代码可读性更高 & 实现异步任务的串行执行,保证按顺序发送请求获取数据第一种形式 ...
C++|Java混合实验-java搭建post方法靶场，Qt发送请求获取数据
目录背景演示 Java web源码 Qt源码背景 post方法使用的地方有多,比如各个Http的API,涉及上传文件等,都是要使用post上传,在此模拟下post的表单上传数据的方式. 演示首 ...
ajax发送请求和数据返回,Ajax发送和接收请求
首先Ajax的不刷新页面提交数据基本上浏览器能接收的信息,Ajax都可以接收,ex:字符串,html标签,css标签,xml格式内容,json格式内容等等..... // IE浏览器 if(Acti ...
java后台获取流_java后台发送请求获取数据，并解析json数据
packagecom.bs.utils;importjava.io.BufferedReader;importjava.io.InputStreamReader;importjava.io.Print ...
C++|Java混合实验-java搭建get方法靶场，Qt发送请求获取数据
目录背景演示 java web源码 Qt端源码背景因为最近想进一步学习http协议,想从QNetworkAccessManager中,但访问其他网站获取的数据,太过于复杂,不便于个人的实验,在 ...
前端框架：发送请求获取数据的执行逻辑
原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内 ...

js采用ajax发送请求获取数据（实例操作）

来，案例之前，容我分享一下js如何发送请求。

原生js发送请求：

ajax发送请求：

话不多说，上代码 ==>

讲解：

js采用ajax发送请求获取数据（实例操作）相关推荐

最新文章

热门文章