下面以前台jQuery,后天C# 的方式,演示了,如何通过Ajax异步方式,传递参数,利用Get或者Post的方法发送,并返回所需的结果,例子注释完整,内容清晰丰富,请看下面代码演示并配合注释,篇幅有点多。
效果:
l6.aspx文件
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="l6.aspx.cs" Inherits="jQuery.Learning.l6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.letters
{
float: left;
width: 260px;
}
.letter
{
margin: 10px;
}
.letter h3
{
font-weight: bold;
}
.button
{
width: 100px;
text-align: center;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
.letter ul
{
list-style: none;
padding: 0;
margin: 0 1em;
}
#dictionary
{
float: left;
width: 500px;
}
.entry
{
padding: 1em 0em;
border-bottom: 1px #555 solid;
}
.entry .term
{
display: inline;
font-weight: bold;
}
.entry .part
{
padding: 0 1em;
display: inline;
font-style: italic;
}
.entry .definition
{
padding: .5em;
}
.entry .definition .quote
{
margin: .5em 2em;
padding: 0 1em;
color: #333;
border-left: 2px #aaa solid;
}
.entry .definition .quote .quote-author
{
font-weight: bold;
margin-left: 20em;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
.highlighted
{
background-color: #dfd;
font-style: italic;
}
</style>
<script type="text/javascript">
// 从服务器异步加载htm到页面中的方法
$(document).ready(function() {
$('#letter-a .button').click(function() {
//当单击时候首先隐藏目录div,然后加载htm,之后使用回调函数,以改变透明度的形式显示目录div
$('#dictionary').hide().load('l6a.htm', function() { //成功回调函数,意思是说,成功了之后会出发的函数,下面应用的都是成功回调
$(this).fadeIn();
});
});
});
//加载json(javascript对象表示法)
$(document).ready(function() {
$('#letter-b .button').click(function() {
//当点击按钮时候,使用全局函数$.getJSON获得指定文件的脚本对象数组结构,第一个参数是存储对象结构的文件名称,
//是异步回调方法,其中的data参数是异步加载返回的对象结构
$.getJSON('l6b.json', function(data) {
//彻底清空div内容
$('#dictionary').empty();
//$.each 函数和普通的each函数含义上相同,遍历,但第一个参数是数组,第二个参数是一个回调函数,每次获得一个新的数组元素的时候调用
//回调函数的参数分别代表,当前索引和当前项
$.each(data, function(entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
html += '<div class="definition">';
html += entry['definition'];
//如果当前项目存在quote键则执行
if (entry['quote']) {
html += '<div class="quote">';
//遍历quote数组
$.each(entry['quote'], function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
//如果存在author键执行
if (entry['author']) {
html += '<div class="quote-author">' + entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
//向div中追加刚才拼接好的html内容
$('#dictionary').append(html);
});
});
});
});
//动态注入js,并执行他
$(document).ready(function() {
$('#letter-c .button').click(function() {
//全局加载,加载后会拥有全局环境中变量和函数的访问权,加载的js脚本会自动运行,注:加载的文件扩展名不重要,主要是内容
$.getScript('l6c.js');
});
});
//动态加载XML文件
$(document).ready(function() {
$('#letter-d .button').click(function() {
//get的功能是简单的通过url复制文本的内容,由于MIME,表示此扩展名为XML文件,所以会获得一个XML dom 树
$.get('l6d.xml', function(data) {
$('#dictionary').empty();
//找到所有的entry,遍历每一个entry元素
$(data).find('entry').each(function() {
//复制当前entry项
var $entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; //获得指定属性的所对应的值
html += '<div class="part">' + $entry.attr('part') + '</div>';
html += '<div class="definition">'
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if ($quote.length) {
html += '<div class="quote">';
//遍历每一个quote元素中的line
$quote.find('line').each(function() {
html += '<div class="quote-line">' + $(this).text() + '</div>'; //获得这个元素的文本
});
//如果存在author属性
if ($quote.attr('author')) {
html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
});
});
//Ajax,加载服务器生成的html Get请求
$(document).ready(function() {
$('#letter-e #get').click(function() {
//获得当前页面的QueryString参数term 值为a标签的文本,第三个参数是回调函数,data是返回的值,
$.get('?', { 'term': $(this).text() }, function(data) {
//将返回值以html方式,加入到div中
$('#dictionary').html(data);
});
//防止打开新的链接,不需返回false
return false;
});
});
//Ajax,加载服务器生成的html Post请求,注释看get
$(document).ready(function() {
$('#letter-e #post').click(function() {
$.post('?', { 'term': $(this).text() }, function(data) {
$('#dictionary').html(data);
});
return false;
});
});
//Load加载简化了操作,效果与上面一样,Load会默认以Post请求方法提交
$(document).ready(function() {
$('#letter-e #load').click(function() {
$('#dictionary').load('?', { 'term': $(this).text() });
return false;
});
});
//表单 提交操作的Ajax处理
//1.串行化为QueryString的方法接收
// $(document).ready(function() {
// $('#letter-f form').submit(function() {
// $.get('?', $(this).find('input').serialize(), function(data) {
// $('#dictionary').html(data);
// });
// return false;
// });
// });
//2.Form方式接收,同上面的From相似
$(document).ready(function() {
$('#letter-f form').submit(function() {
$('#dictionary').load('?', { 'info': $('input[name="info"]').val() });
return false;
});
});
//Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调
//但对与Ajax的监控,本身是全局性的
$(document).ready(function() {
$('#loading').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
//为Ajax全局,包括后加载dictionary 的中的h3 绑定事件
$(document).ready(function() {
$('body').click(function(event) { //如果单击的是h3就切换,为body添加这个单击事件可以保证后加载部分的h3标签同样可以用,
//如果为h3添加,就仅能对初始化时候的h3有效,这种对body添加的方法,使用了事件冒泡原理
if ($(event.target).is('h3')) {
$(event.target).toggleClass('highlighted');
}
});
});
//如果直接为h3添加单击事件,动态的为新加载部分添加单击事件,而且需要限定绑定事件的作用域,否则会重复添加
// $(document).ready(function() {
// var bindBehaviors = function(scope) {
// $('h3', scope).click(function() {
// $(this).toggleClass('highlighted');
// });
// }
// 为这个方法传入当前This用来限定当前的范围
// bindBehaviors(this);
//
// $('#letter-a .button').click(function() {
// $('#dictionary').hide().load('l6a.htm', function() {
// bindBehaviors(this);
// $(this).fadeIn();
// });
// });
// });
// 结尾:
// 在浏览器使用Ajax,总是会遇到跨域访问权限的问题,解决的方法有这么几种思路,可以参考
// 1.用服务器来预处理这些数据,并存储在服务器上供客户端调用
// 2.将远程服务器脚本加载到本地,脚本要提供接口和指定操作,明确的像你的文档提供数据才行,这样通过这个脚本中提供的XMLHTTPRequest,
// 可以获得指定服务器的数据,Google Map API 就是使用了这个道理,看下面
// $(document.createElement('script')).attr("src", 'http://www.finehappy.com/example.js').appendTo('head');
// 3. <iframe>标签解决,思路和2条一样
</script>
</head>
<body>
<div id="container">
<div id="header">
<h2>
新年祝福</h2>
<div class="author">
冯瑞涛</div>
</div>
<div class="letters">
<div class="letter" id="letter-a">
<h3>
异步加载 html</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-b">
<h3>
异步加载 json</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-c">
<h3>
异步注入 js</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-d">
<h3>
异步加载XML</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-e">
<h3>
jQuery Ajax for .Net
</h3>
<ul>
<li>Ajax加载<a id="get" href="">get</a>html文本</li>
<li>Ajax加载<a id="post" href="">post</a>html文本</li>
<li>Ajax加载<a id="load" href="">load</a>html文本</li>
</ul>
</div>
<div class="letter" id="letter-f">
<h3>
表单提交异步</h3>
<form id="form1" runat="server">
<input type="text" name="info" value="" id="info" />
<input type="submit" name="submit" value="发送" id="submit" />
</form>
</div>
</div>
<div id="loading">
服务器处理中,请稍后。
</div>
<div id="dictionary">
</div>
</div>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="l6.aspx.cs" Inherits="jQuery.Learning.l6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.letters
{
float: left;
width: 260px;
}
.letter
{
margin: 10px;
}
.letter h3
{
font-weight: bold;
}
.button
{
width: 100px;
text-align: center;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
.letter ul
{
list-style: none;
padding: 0;
margin: 0 1em;
}
#dictionary
{
float: left;
width: 500px;
}
.entry
{
padding: 1em 0em;
border-bottom: 1px #555 solid;
}
.entry .term
{
display: inline;
font-weight: bold;
}
.entry .part
{
padding: 0 1em;
display: inline;
font-style: italic;
}
.entry .definition
{
padding: .5em;
}
.entry .definition .quote
{
margin: .5em 2em;
padding: 0 1em;
color: #333;
border-left: 2px #aaa solid;
}
.entry .definition .quote .quote-author
{
font-weight: bold;
margin-left: 20em;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
.highlighted
{
background-color: #dfd;
font-style: italic;
}
</style>
<script type="text/javascript">
// 从服务器异步加载htm到页面中的方法
$(document).ready(function() {
$('#letter-a .button').click(function() {
//当单击时候首先隐藏目录div,然后加载htm,之后使用回调函数,以改变透明度的形式显示目录div
$('#dictionary').hide().load('l6a.htm', function() { //成功回调函数,意思是说,成功了之后会出发的函数,下面应用的都是成功回调
$(this).fadeIn();
});
});
});
//加载json(javascript对象表示法)
$(document).ready(function() {
$('#letter-b .button').click(function() {
//当点击按钮时候,使用全局函数$.getJSON获得指定文件的脚本对象数组结构,第一个参数是存储对象结构的文件名称,
//是异步回调方法,其中的data参数是异步加载返回的对象结构
$.getJSON('l6b.json', function(data) {
//彻底清空div内容
$('#dictionary').empty();
//$.each 函数和普通的each函数含义上相同,遍历,但第一个参数是数组,第二个参数是一个回调函数,每次获得一个新的数组元素的时候调用
//回调函数的参数分别代表,当前索引和当前项
$.each(data, function(entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
html += '<div class="definition">';
html += entry['definition'];
//如果当前项目存在quote键则执行
if (entry['quote']) {
html += '<div class="quote">';
//遍历quote数组
$.each(entry['quote'], function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
//如果存在author键执行
if (entry['author']) {
html += '<div class="quote-author">' + entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
//向div中追加刚才拼接好的html内容
$('#dictionary').append(html);
});
});
});
});
//动态注入js,并执行他
$(document).ready(function() {
$('#letter-c .button').click(function() {
//全局加载,加载后会拥有全局环境中变量和函数的访问权,加载的js脚本会自动运行,注:加载的文件扩展名不重要,主要是内容
$.getScript('l6c.js');
});
});
//动态加载XML文件
$(document).ready(function() {
$('#letter-d .button').click(function() {
//get的功能是简单的通过url复制文本的内容,由于MIME,表示此扩展名为XML文件,所以会获得一个XML dom 树
$.get('l6d.xml', function(data) {
$('#dictionary').empty();
//找到所有的entry,遍历每一个entry元素
$(data).find('entry').each(function() {
//复制当前entry项
var $entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; //获得指定属性的所对应的值
html += '<div class="part">' + $entry.attr('part') + '</div>';
html += '<div class="definition">'
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if ($quote.length) {
html += '<div class="quote">';
//遍历每一个quote元素中的line
$quote.find('line').each(function() {
html += '<div class="quote-line">' + $(this).text() + '</div>'; //获得这个元素的文本
});
//如果存在author属性
if ($quote.attr('author')) {
html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
});
});
//Ajax,加载服务器生成的html Get请求
$(document).ready(function() {
$('#letter-e #get').click(function() {
//获得当前页面的QueryString参数term 值为a标签的文本,第三个参数是回调函数,data是返回的值,
$.get('?', { 'term': $(this).text() }, function(data) {
//将返回值以html方式,加入到div中
$('#dictionary').html(data);
});
//防止打开新的链接,不需返回false
return false;
});
});
//Ajax,加载服务器生成的html Post请求,注释看get
$(document).ready(function() {
$('#letter-e #post').click(function() {
$.post('?', { 'term': $(this).text() }, function(data) {
$('#dictionary').html(data);
});
return false;
});
});
//Load加载简化了操作,效果与上面一样,Load会默认以Post请求方法提交
$(document).ready(function() {
$('#letter-e #load').click(function() {
$('#dictionary').load('?', { 'term': $(this).text() });
return false;
});
});
//表单 提交操作的Ajax处理
//1.串行化为QueryString的方法接收
// $(document).ready(function() {
// $('#letter-f form').submit(function() {
// $.get('?', $(this).find('input').serialize(), function(data) {
// $('#dictionary').html(data);
// });
// return false;
// });
// });
//2.Form方式接收,同上面的From相似
$(document).ready(function() {
$('#letter-f form').submit(function() {
$('#dictionary').load('?', { 'info': $('input[name="info"]').val() });
return false;
});
});
//Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调
//但对与Ajax的监控,本身是全局性的
$(document).ready(function() {
$('#loading').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
//为Ajax全局,包括后加载dictionary 的中的h3 绑定事件
$(document).ready(function() {
$('body').click(function(event) { //如果单击的是h3就切换,为body添加这个单击事件可以保证后加载部分的h3标签同样可以用,
//如果为h3添加,就仅能对初始化时候的h3有效,这种对body添加的方法,使用了事件冒泡原理
if ($(event.target).is('h3')) {
$(event.target).toggleClass('highlighted');
}
});
});
//如果直接为h3添加单击事件,动态的为新加载部分添加单击事件,而且需要限定绑定事件的作用域,否则会重复添加
// $(document).ready(function() {
// var bindBehaviors = function(scope) {
// $('h3', scope).click(function() {
// $(this).toggleClass('highlighted');
// });
// }
// 为这个方法传入当前This用来限定当前的范围
// bindBehaviors(this);
//
// $('#letter-a .button').click(function() {
// $('#dictionary').hide().load('l6a.htm', function() {
// bindBehaviors(this);
// $(this).fadeIn();
// });
// });
// });
// 结尾:
// 在浏览器使用Ajax,总是会遇到跨域访问权限的问题,解决的方法有这么几种思路,可以参考
// 1.用服务器来预处理这些数据,并存储在服务器上供客户端调用
// 2.将远程服务器脚本加载到本地,脚本要提供接口和指定操作,明确的像你的文档提供数据才行,这样通过这个脚本中提供的XMLHTTPRequest,
// 可以获得指定服务器的数据,Google Map API 就是使用了这个道理,看下面
// $(document.createElement('script')).attr("src", 'http://www.finehappy.com/example.js').appendTo('head');
// 3. <iframe>标签解决,思路和2条一样
</script>
</head>
<body>
<div id="container">
<div id="header">
<h2>
新年祝福</h2>
<div class="author">
冯瑞涛</div>
</div>
<div class="letters">
<div class="letter" id="letter-a">
<h3>
异步加载 html</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-b">
<h3>
异步加载 json</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-c">
<h3>
异步注入 js</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-d">
<h3>
异步加载XML</h3>
<div class="button">
祝福</div>
</div>
<div class="letter" id="letter-e">
<h3>
jQuery Ajax for .Net
</h3>
<ul>
<li>Ajax加载<a id="get" href="">get</a>html文本</li>
<li>Ajax加载<a id="post" href="">post</a>html文本</li>
<li>Ajax加载<a id="load" href="">load</a>html文本</li>
</ul>
</div>
<div class="letter" id="letter-f">
<h3>
表单提交异步</h3>
<form id="form1" runat="server">
<input type="text" name="info" value="" id="info" />
<input type="submit" name="submit" value="发送" id="submit" />
</form>
</div>
</div>
<div id="loading">
服务器处理中,请稍后。
</div>
<div id="dictionary">
</div>
</div>
</body>
</html>
l6.aspx.cs 文件
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace jQuery.Learning
{
public partial class l6 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//获取Get穿过来的参数
if (Request.QueryString["term"] == "get")
{
string strReturn = "<div class='entry'>GET 请求异步Ajax调用html元素返回的值</div>";
Response.Write(strReturn);
Response.End();
}
//获取post传递过来的参数
if (Request.Form["term"] == "post")
{
string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值</div>";
Response.Write(strReturn);
Response.End();
}
//获取post传递过来的参数 Load加载
if (Request.Form["term"] == "load")
{
string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值 Load方法加载</div>";
Response.Write(strReturn);
Response.End();
}
//获取post传递过来的参数 Load加载
if (Request.Form["info"] != null || Request.QueryString["info"] != null)
{
string strReturn = "<div class='entry'>你输入的是" + Request.Form["info"] + Request.QueryString["info"] + "</div>";
Response.Write(strReturn);
Response.End();
}
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace jQuery.Learning
{
public partial class l6 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//获取Get穿过来的参数
if (Request.QueryString["term"] == "get")
{
string strReturn = "<div class='entry'>GET 请求异步Ajax调用html元素返回的值</div>";
Response.Write(strReturn);
Response.End();
}
//获取post传递过来的参数
if (Request.Form["term"] == "post")
{
string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值</div>";
Response.Write(strReturn);
Response.End();
}
//获取post传递过来的参数 Load加载
if (Request.Form["term"] == "load")
{
string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值 Load方法加载</div>";
Response.Write(strReturn);
Response.End();
}
//获取post传递过来的参数 Load加载
if (Request.Form["info"] != null || Request.QueryString["info"] != null)
{
string strReturn = "<div class='entry'>你输入的是" + Request.Form["info"] + Request.QueryString["info"] + "</div>";
Response.Write(strReturn);
Response.End();
}
}
}
}
下面是几个辅助文件,放在同目录下
l6a.htm
Code
<div class="entry">
<h3 class="term">
动态加载html</h3>
<div class="part">
贺词</div>
<div class="definition">
<p>祝你一帆风顺,二龙腾飞,三羊开泰,四季平安,五福临门,六六大顺,七星高照,八方来财,九九同心,十全十美。</p>
<p>新的1年开始,祝好事接2连3,心情4季如春,生活5颜6色,7彩缤纷,偶尔8点小财,烦恼抛到9霄云外!请接受我10心10意的祝福。祝新春快乐!</p>
<p>春天的钟声响,新年的脚步迈,祝新年的钟声,敲响你心中快乐的音符,幸运与平安,如春天的脚步紧紧相随!春华秋实,我永远与你同在!</p>
</div>
</div>
<div class="entry">
<h3 class="term">
动态加载html</h3>
<div class="part">
贺词</div>
<div class="definition">
<p>祝你一帆风顺,二龙腾飞,三羊开泰,四季平安,五福临门,六六大顺,七星高照,八方来财,九九同心,十全十美。</p>
<p>新的1年开始,祝好事接2连3,心情4季如春,生活5颜6色,7彩缤纷,偶尔8点小财,烦恼抛到9霄云外!请接受我10心10意的祝福。祝新春快乐!</p>
<p>春天的钟声响,新年的脚步迈,祝新年的钟声,敲响你心中快乐的音符,幸运与平安,如春天的脚步紧紧相随!春华秋实,我永远与你同在!</p>
</div>
</div>
l6b.json
Code
//数组中包着数组,数组中再有几个键值对
//结构[{"a":'1',"b":["1","2"]},{}]不能出错
[
{
"term": "动态加载json",
"part": "祝你",
"definition": "在新的一年里",
"quote": [
"身体健康",
"事事如意",
"恭喜发财",
"牛年大吉"
],
"作者": "Jorace"
},
{
"term": "佳月",
"part": "祝你",
"definition": "新年快乐"
}
]
//数组中包着数组,数组中再有几个键值对
//结构[{"a":'1',"b":["1","2"]},{}]不能出错
[
{
"term": "动态加载json",
"part": "祝你",
"definition": "在新的一年里",
"quote": [
"身体健康",
"事事如意",
"恭喜发财",
"牛年大吉"
],
"作者": "Jorace"
},
{
"term": "佳月",
"part": "祝你",
"definition": "新年快乐"
}
]
l6c.js
Code
//数组中包着数组,数组中再有几个键值对
//结构[{"a":'1',"b":["1","2"]},{}]不能出错
var entries = [
{
"term": "动态注入js",
"part": "祝你",
"definition": "在新的一年里",
"quote": [
"身体健康",
"事事如意",
"恭喜发财",
"牛年大吉"
],
"作者": "Jorace"
},
{
"term": "佳月",
"part": "祝你",
"definition": "新年快乐"
}
]
var html = '';
$.each(entries, function() {
html += '<div class="entry">';
html += '<h3 class="term">' + this['term'] + '</h3>';
html += '<div class="part">' + this['part'] + '</div>';
html += '<div class="definition">' + this['definition'] + '</div>';
html += '</div>';
});
$('#dictionary').html(html);
//数组中包着数组,数组中再有几个键值对
//结构[{"a":'1',"b":["1","2"]},{}]不能出错
var entries = [
{
"term": "动态注入js",
"part": "祝你",
"definition": "在新的一年里",
"quote": [
"身体健康",
"事事如意",
"恭喜发财",
"牛年大吉"
],
"作者": "Jorace"
},
{
"term": "佳月",
"part": "祝你",
"definition": "新年快乐"
}
]
var html = '';
$.each(entries, function() {
html += '<div class="entry">';
html += '<h3 class="term">' + this['term'] + '</h3>';
html += '<div class="part">' + this['part'] + '</div>';
html += '<div class="definition">' + this['definition'] + '</div>';
html += '</div>';
});
$('#dictionary').html(html);
l6d.xml
Code
<?xml version="1.0" encoding="utf-8" ?>
<entries>
<entry term="异步加载XML" part="祝福">
<definition>
新的一年里
</definition>
<quote author="冯瑞涛">
<line>身体健康</line>
<line>万事如意</line>
</quote>
</entry>
<entry term="佳月" part="祝福">
<definition>
佳月的祝福
</definition>
</entry>
</entries>
<?xml version="1.0" encoding="utf-8" ?>
<entries>
<entry term="异步加载XML" part="祝福">
<definition>
新的一年里
</definition>
<quote author="冯瑞涛">
<line>身体健康</line>
<line>万事如意</line>
</quote>
</entry>
<entry term="佳月" part="祝福">
<definition>
佳月的祝福
</definition>
</entry>
</entries>
冯瑞涛