基于jQuery的AJAX和JSON的实例
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。


































































这个是jQuery的AJAX方法,返回数据并不复杂,主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份,接下来row.find("#OrderID").text(n.订单ID);,表示找到id=OrderID的标记,设置它的innerText为相应的数据,当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式,比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。





























































































还 是要注意id属性。大家看到这里应该明白了,不管用什么样的表现形式,只要id属性相同,就可以把数据绑定到对应的位置。这样的话,我们这些做程序的就不 会因为美工的修改而修改代码了,而且美工也只要做出html就可以了,不需要为服务器控件做模板(不过我还没遇到过这样的美工,都是美工设计好了我来改成 服务器控件的模板)。
基于jQuery的AJAX和JSON的实例的更多相关文章
- 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- PHP、jQuery、AJAX和MySQL 数据库实例
index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】
package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- 通过JQuery的$.ajax()把 json 数据 post 给 PHP
通过JQuery的$.ajax()把 json 数据 post 给 PHP时的几种情况: 无法在PHP中通过$_POST 以及 $_REQUEST 获取json数据,即 $json = $_POST[ ...
- Python Django 之 基于JQUERY的AJAX 登录页面
一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
随机推荐
- Android SlidingMenu侧滑菜单使用
把下载的侧滑菜单压缩包打开,会有一个library文件夹,在eclipse中import existing android code into workspace,导入library文件夹,并且选择作 ...
- 构建高性能web之路------mysql读写分离实战
http://blog.csdn.net/cutesource/article/details/5710645 http://www.jb51.net/article/38953.htm http:/ ...
- Android中级之网络数据解析一之xml解析
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! --Comic Sans MS Xml解析具有跨平台性,语言无关性,易操作性,因此广受开发者的欢迎. ...
- QT静态编译
Qt静态编译(链接)和动态编译区别 Qt的静态编译译(其实应该叫链接,不是编译),将各模块编译成静态库,这样在编译自己写的Qt程序时,会将这些静态库编译(链接)到你的EXE文件中去的.Qt的动态编译, ...
- iOS 深拷贝和浅拷贝
注意,本文只说结论不说过程 1. 对于系统的非容器类对象,我们可以认为,如果对一不可变对象复制,copy是指针复制(浅拷贝)和mutableCopy就是对象复制(深拷贝).如果是对可变对象复制,都是深 ...
- jd-gui 反编译后去除注释
默认情况下,使用jd-gui反编译时会有注释. 行号注释 /* 521:502 */ 元信息 /* Location: D:\core-1.0.0.jar * Qualified ...
- 15_采用Pull解析器解析和生成XML内容
java还提供SAX和DOM用于解析XML Android还集成了Pull解析器——推荐 package cn.itcast.service; import java.io.InputStream; ...
- Ubuntu 14.04怎样升级到Ubuntu 14.10
Ubuntu 14.04怎样升级到Ubuntu 14.10 Ubuntu 14.10 Utopic Unicorn 将在10月23日正式发布,9月25日最终测试版本已经发布,Ubuntu 14 ...
- Java 异常 —— java.io.InvalidClassException: javax.xml.namespace.QName; local class incompatible
项目中有个 WebService 接口,调试时使用 Main 方法运行,别人的机器上都能运行,就笔者的机器出问题.他们说是RP的问题…… 异常信息: java.io.InvalidClassExcep ...
- 选错实施顾问公司 ERP项目九死一生
今天接到一个朋友的电话,他是一家企业老总.这位老总感到非常头疼的是他的企业选择了一款国际上名气很大的ERP软件,但实施效果却强差人意.他的疑问是"不是说只要选对了ERP产品,谁实施都能成功吗 ...