ajax获取数据后怎么去渲染到页面？

时间：2021-11-29 05:16:59

$.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

 

相关文章