下面以前台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>
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(); } } }}
下面是几个辅助文件，放在同目录下
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>
l6b.json
Code //数组中包着数组，数组中再有几个键值对//结构[{"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);
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>
转载于:https://www.cnblogs.com/finehappy/archive/2009/01/28/1381254.html
