ajax获取数据后渲染到页面方法

$.ajax({url:"apiAttachmentAction_uploadAttachment.action",
type:"post",
data:forms,
contentType:false,
success:function(data){}
error:function(e){}

对于请求回来的数据怎么渲染到相应的页面呢，主要总结了以下几种方法：

1.比较常见的就是字符串拼接的方式，如w3school上面提供的三中方式，配合jquery的append,prepend,after等方法插入到页面中，如果要给对于元素添加样式，可以直接给该元素加一个类名，在对应的css文件里修改其样式即可，对动态添加上的元素添加js时需要使用事件委托，利用冒泡的原理，把事件加到父级上，触发执行效果。

如：

function afterText()
{var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

添加js:

$("ul").on("click","li",function(){　　alert(1);
})

2.与第一种大致，先创建对象，然后添加到外层对象中

　　var node=document.createElement("li");var textnode=document.createTextNode("Water");node.appendChild(textnode);document.getElementById("myList").appendChild(node);

3.使用angular .js，vue等进行数据绑定，直接渲染到页面，前提是会使用angular

ajax获取数据后渲染到页面方法相关推荐

通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决elementui多层dialog弹窗遮罩问题弹窗套娃出现了整个屏幕都是遮罩层的问题,需要鼠标点击一下才能正常. 在弹窗组件代码上加上 append-to-body 就可以了,表示这个弹窗是嵌在 ...
自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
AJAX获取数据然后显示在页面
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说一.列表页 1.访问链接list.php时判断是pc ...
vue中拿到接口，并获取数据，渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法前提 ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
一.目前网上常用的解决方案 //将ajax封装起来启用一个定时器达到三秒抓一次数据 window.function(){setInterval(ajaxNew(),3000); } 存在的问题是,首次 ...
ajax异步获取数据后动态向表格中添加数据的页面
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...

ajax获取数据后渲染到页面方法

ajax获取数据后渲染到页面方法相关推荐

最新文章

热门文章