$.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. javascript继承--原型链的 继承

    作者的话:原型链是JavaScript中相当重要的一个知识点,这里我使用了函数结构图,来帮助我更好的理解 /* 原型链继承方式: 通过改变一个对象的原型对象的指向来继承另一个对象 原理: 我们知道,一 ...

  2. IOS动态自适应标签实现

    先上效果图 设计要求 1.标签的宽度是按内容自适应的 2.一行显示的标签个数是动态的,放得下就放,放不下就换行 3.默认选中第一个 4.至少选中一个标签 实现思路 首先我们从这个效果上来看,这个标签是 ...

  3. 老司机实战Windows Server Docker:4 单节点Windows Docker服务器简单运维(下)

    上篇中,我们主要介绍了使用docker-compose对Windows Docker单服务器进行远程管理,编译和部署镜像,并且设置容器的自动启动.但是,还有一些重要的问题没有解决,这些问题不解决,就完 ...

  4. Office 365开发环境概览

    本文于2017年3月26日首发于LinkedIn,原文链接请参考这里 本系列文章已经按照既定计划在每周更新,此前的几篇文章如下 Office 365 开发概览系列文章和教程 Office 365开发概 ...

  5. C++实现四叉树

    什么是四叉树? 四叉树可以有效解决这个问题. 四叉树每一层都把地图划分四块,根据地图尺寸来决定树的层数,层数越大划分越细. 但需要对某一范围的单位筛选时,只需要定位到与范围相交的树区域,再对其区域内的 ...

  6. WebService返回数据前台获取并处理JSON的相关问题

    起因: 记录这个问题的起因是一次解答网友的问题,当初自己初次接触webservice时也遇到过,但在写答案时,并没有很深的印象,只是知道webservice在后台返回值的时候,那里是有个坑的.网友问的 ...

  7. 使用VB6写一个自定义的进度信息框窗口

    一.起因说明 之前有些项目是用Access完成的,当时为了给用户显示一些进度信息,自制了一个进度信息窗体,类似下图所示: 随着项目不断变迁,需要将进度信息按阶段及子进度进行显示,并且出于代码封装的需求 ...

  8. DC平衡双向控制解串器 转接IC GM8914:FPD-LINK III转LVTTL芯片

    1 概述 GM8914型DC平衡双向控制解串器,其主要功能是实现将2.8Gbps高速串行数据转换成10或12位并行控制信号,并同步输出一路时钟信号:同时低速通道将芯片控制信息调制到高速差分信号上传输给 ...

  9. Nature:新发现挑战神经元作用传统理论 [转自科学网]

    美德科学家独立进行的两项最新研究表明,单个神经元的激发就足以影响学习和行为.这一结论挑战了人们长期以来的认识,即数千个神经元的有序排列才能够产生一个行为反应.这两篇论文12月19日在线发表于<自 ...

  10. 用ElasticSearch搭建自己的搜索和分析引擎

    作者:robben,腾讯高级工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 导语:互联网产品中的检索功能随处可见.当你的项目规模是百度大搜|商搜或者微信公众号搜索这种体量的时候 ...