$.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获取数据后怎么去渲染到页面?的更多相关文章

  1. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  2. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  3. vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  4. select2 AJAX获取数据

    页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  5. jquery通过ajax获取数据,控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  6. jquery.ajax和Ajax 获取数据

    前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...

  7. node.js之用ajax获取数据和ejs获取数据

    摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...

  8. 获取链接的参数,判断是否是微信打开,ajax获取数据

    //获取链接参数function GetQueryString(name) {    var reg = new RegExp("(^|&)" + name + " ...

  9. 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

随机推荐

  1. 【G】系列导航

    G.开源的分布式部署解决方案 [G]开源的分布式部署解决方案 - 预告篇 [G]开源的分布式部署解决方案(一) - 开篇 [G]开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的 [ ...

  2. 解决MVC模型验证在IE 6 7下不起作用或者报错

    文件版本列出: Jquery版本1.7.1 jQuery Validation 版本1.9.0 (VS2012创建MVC项目自动生成的版本) 最好VS2012创建MVC项目自动生成的版本,而不是VS2 ...

  3. 源码分析——从AIDL的使用开始理解Binder进程间通信的流程

    源码分析——从AIDL的使用开始理解Binder进程间通信的流程 Binder通信是Android系统架构的基础.本文尝试从AIDL的使用开始理解系统的Binder通信. 0x00 一个AIDL的例子 ...

  4. [编织消息框架][JAVA核心技术]jdk动态代理

    需要用到的工具  jdk : javac javap class 反编译 :JD-GUI http://jd.benow.ca/ import java.lang.reflect.Invocation ...

  5. rsync+inotify实现文件同步更新(配置)

    linux下为了数据安全或者网站同步镜像,不得不考虑一些实时备份的问题,这篇linux下通过rsync+inotify 实现数据实时备份配置过程记录下来,防止遗忘配置过程记录下来,防止遗忘!如有建议技 ...

  6. redis实现队列消息的ack

    由于公司提供的队列实在太过于蛋疼而且还限制不能使用其他队列,但为了保证数据安全性需要一个可以有ack功能的队列. 原生的redis中通过L/R PUSH/POP方式来实现队列的功能,这个当然是没办法满 ...

  7. 老李推荐:第5章3节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 启动脚本

    老李推荐:第5章3节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 启动脚本   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性 ...

  8. 手机自动化测试:appium源码分析之bootstrap十三

    手机自动化测试:appium源码分析之bootstrap十三   poptest(www.poptest.cn)是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开 ...

  9. 手机自动化测试:appium源码分析之bootstrap十

    手机自动化测试:appium源码分析之bootstrap十   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣, ...

  10. 简单易用的.NET免费开源RabbitMQ操作组件EasyNetQ解析

    对于目前大多的.NET项目,其实使用的技术栈都是差不多,估计现在很少用控件开发项目的了,毕竟一大堆问题.对.NET的项目,目前比较适合的架构ASP.NET MVC,ASP.NET WebAPI,ORM ...