jQuery的ajax获取数据渲染页面

一、ajax的请求方式

post

$.ajax({//请求方式type:'POST',//发送请求的地址url:'xxxxxx',//服务器返回的数据类型dataType:'json',//发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式data:{key1:value1,key2:value2},success:function(data){//请求成功函数内容},error:function(jqXHR){//请求失败函数内容}
});

get

$.ajax({//请求方式type:'GET',//发送请求的地址以及传输的数据url:'xxxxxx?参数'+=xxx,//服务器返回的数据类型dataType:'json',success:function(data){//请求成功函数内容},error:function(jqXHR){//请求失败函数内容}
});

二、页面列表的样式结构

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{background: #f5f5f5;}.item{width: 100%;padding: 10px;box-sizing: border-box;background: #fff;border-bottom: 1px solid #e5e5e5;margin-bottom: 10px;}.item .item-title{font-size: 16px;line-height: 24px;}.item .item-content{color: #9D9D9D;margin-right: 20px;}</style></head><body><!--页面容器--><div id="container"><!--每个条目--><div class="item"><div class="item-title">作业名字</div><div><span class="item-content">创建时间</span><span class="item-content">发布老师</span></div></div></div></body>
</html>

效果如下

三、js代码的处理

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>$.ajax({ //请求方式type:'get',//发送请求的地址//我这里的地址是不需要传数据的，所以没有拼接参数url:'https://api.myjson.com/bins/73fno',//服务器返回的数据类型dataType:'json',//请求成功的处理success:function(data){console.log(data);//获取需要的数据var group = data.content;//拼接字符串var str = '';//对数据做遍历，拼接到页面显示for(var i=0;i<group.length;i++){str += '<div class="item">'+'<div class="item-title">'+ group[i].name +'</div>'+'<div>'+'<span class="item-content">'+ group[i].time +'</span>'+'<span class="item-content">'+ group[i].teacher +'</span>'+'</div>'+'</div>';}//放入页面的容器显示$('#container').html(str);},//请求失败的处理error:function(jqXHR){console.log(jqXHR);}});</script>

控制台打印的数据

最终效果

四、总结

获取数据的方式有很多种，这只是其中一种，并且比较简单的把数据渲染到页面上。实际项目中还需要对获取的数据进行分页、筛选、判断等各种处理。

参考链接：https://blog.csdn.net/qq_33026699/article/details/82422963

jQuery的ajax获取数据渲染页面相关推荐

【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...
Ajax获取数据渲染到页面的过程
Ajax 分四步骤: 创建一个Ajax对象: 打开一个链接: 监听请求的数据: 发送请求. 直接贴代码啦 <script>$(function () {$.ajax({url:'http: ...
Ajax获取数据渲染到页面
<script> $(function () {$.ajax({url:'http://www.hzy.cmdcw.com/index.php/message', type:'post', ...
ajax 限制显示条数,jquery通过ajax获取数据，控制显示的数据条数
无标题文档 body { margin:0;} table { border:1px solid #ccc;} td,th { height:26px; font-family:"微软雅黑& ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
BOS项目02_02_zTree-通过ajax的获取菜单数据、监听树形菜单的点击事件、读取json文件、Ajax获取数据
系列文章目录文章目录系列文章目录前言一.发送ajax网络请求获取菜单数据二.监听树形菜单的点击事件总结前言一.发送ajax网络请求获取菜单数据我们现在的数是写死的,那么实际项目中我们 ...

jQuery的ajax获取数据渲染页面

一、ajax的请求方式

post

get

二、页面列表的样式结构

效果如下

三、js代码的处理

控制台打印的数据

最终效果

四、总结

jQuery的ajax获取数据渲染页面相关推荐

最新文章

热门文章