使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面)，下面通过一个小demo说明一下，前端页面代码如下所示
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="p_tg.aspx.cs" Inherits="p_tg" %>
2
3 <!DOCTYPE html>
4
5 <html>
6 <head>
7
8 <meta charset="UTF-8">
9
10 <script src="/js/jquery-1.7.2.min.js"></script>
11
12 </head>
13 <body>
14 <form runat="server"><!-- onsubmit="return JoinAjax()"-->
15 <asp:Literal runat="server" ID="lt_zhekou" Visible="false"></asp:Literal>
16
17 <!--蒙层-->
18
19 <div runat="server" class="mc_01" id="divOne_1" style="display:none;"><!--蒙层1-->
20 <div class="mc_a"><img src="data:images/mc_01.png"></div>
21 <div class="c_but_02"><a href="#" onclick="return click_a('divOne_1')">关闭</a></div>
22 <div class="c_bot02"><img src="data:images/mc_02.png"></div>
23 </div>
24 <div runat="server" class="mc_01" id="div1" style="display:none;"><!--蒙层2-->
25 <div class="mc_a"><img src="data:images/mc_03.png"></div>
26 <div class="c_but_02"><a href="#" onclick="return click_a('div1')">关闭</a></div>
27 <div class="c_bot02"><img src="data:images/mc_02.png"></div>
28 </div>
29 <!--主页-->
30
31
32 </form>
33
34 </body>
35 </html>
说明：这个页面需要实现的功能是，后台通过sql查询数据库，根据返回结果，前端用ajax访问后台方法返回值，弹出蒙层1,或者蒙层2。(如果不用ajax方式，改变页面内容时是有刷新的)
1 <script type="text/javascript">
2
3 $(function () {
4 $("#btnJoin").click(function () {
5 var bbid = $("#bbid").val();
6 var ppid = $("#ppid").val();
7 var openid = $("#openid").val();
8
9 var nick = $("#nick").val();
10 var sex = $("#sex").val();
11 var pic = $("#pic").val(); //有数据的
12
13 $.ajax({
14 type: "get",
15 url: "p_tg_ajax.aspx",
16 data: { "bbid": bbid, "ppid": ppid, "openid": openid, "nick": nick, "sex": sex, "pic": pic },
17 success: function (res) {
18 //alert(res);
19 if (res == 0) {//根据后台的返回结果动态切换显示内容
20
21 $("#div1").css("display", "none");
22 $("#divOne_1").css("display", "block"); //蒙层1
23 }
24 else if (res == 1) {
25 $("#div1").css("display", "block"); //蒙层2
26 $("#divOne_1").css("display", "none");
27
28 } else {
29 alert(res);
30 }
31 },
32 error: function (xhr) {
33 alert("异常");
34 }
35 })
36 })
37 });
38
39 </script>
页面上添加隐藏域传值
<input type="hidden" id="openid" value="<%=openid %>" />
<input type="hidden" id="bbid" value="<%=bbid %>" />
<input type="hidden" id="ppid" value="<%=ppid %>" />
<input type="hidden" id="nick" value="<%=nick %>" />
<input type="hidden" id="sex" value="<%=sex %>" />
<input type="hidden" id="pic" value="<%=pic %>" />
p_tg_ajax.aspx的页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="p_tg_ajax.aspx.cs" Inherits="p_tg_ajax" %>
p_tg_ajax.aspx的.cs文件
public partial class p_tg_ajax : System.Web.UI.Page
{
public string bbid;
public string openid;
public string ppid;
public string code;
public string nick;
public string sex;
public string pic;
public string accessToken;
public string url;
public string data; WebClient client = new WebClient();
JavaScriptSerializer serializer = new JavaScriptSerializer(); protected void Page_Load(object sender, EventArgs e)
{
bbid = Request.QueryString["bbid"];//接收参数
ppid = Request.QueryString["ppid"];//
code = Request.QueryString["code"];
openid = Request.QueryString["openid"];
nick = Request.QueryString["nick"];
sex = Request.QueryString["sex"];
pic = Request.QueryString["pic"]; string appid = "aaaaaaaaaaa";
string secret = ""; string sql = "select * from bbppcc where bbid=" + bbid + " and ccid=(select id from cc where openid='" + openid + "') and ppid=" + ppid + ""; bool bl = SqlHelper.ExecNonQuery(sql.ToString(), null);
if (bl == true)
{
Response.Write();
}
else
{ SqlParameter[] p = new SqlParameter[]
{
new SqlParameter("@bbid",bbid),
new SqlParameter("@ppid",ppid),
new SqlParameter("@openid",openid),
new SqlParameter("@pic",pic),
new SqlParameter("@nick",nick),
new SqlParameter("@sex",sex)
}; DataTable dt = SqlHelper.ExecuteTable("cc_add", true, p);
if (dt.Rows.Count > )
{
sql = "select * from bbppcc where bbid=" + bbid + " and ccid=(select id from cc where openid='" + openid + "') and ppid=" + ppid + "";
bl = SqlHelper.ExecNonQuery(sql.ToString(), null);
if (bl == true)
{
Response.Write();
}
else
{
Response.Write();
}
}
else
{
Response.Write("失败!"); } }
}
}
ajax方法的属性说明
type是提交方式,有两种post和get,我用的是get传值,这种方式传值bbid = Request.QueryString["bbid"];后台使用QueryString取值,注意用post传值QueryString是取不到值的!!!
url是String类型的参数，（默认为当前页地址）发送请求的地址。
date是Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式，例如{"a": 111, "b":222, "c": 333}转换为&a=111&b=222。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
success请求成功后回调函数。
使用ajax实现无刷新改变页面内容的更多相关文章
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...
- 使用ajax和js无刷新改变页面内容和地址栏URL
发现一个可以改变地址栏,而不导致页面刷新的东东. Chrome, FF测试通过,不支持IE. 实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的 ...
- 使用ajax和history.pushState无刷新改变页面URL onpopstate（转）
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 使用ajax和history.pushState无刷新改变页面URL(转)
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- 使用pjax实现类似github无刷新更改页面url
pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url.一起来学习一下这个插件吧. 我们都知道 ...
- Ajax 实现无刷新页面
注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...
随机推荐
- 初识Lucene.net
最近想提高下自己的能力,也是由于自己的项目中需要用到Lucene,所以开始接触这门富有挑战又充满新奇的技术.. 刚刚开始,只是写了个小小的demo,用了用lucene,确实很好 创建索引 Data ...
- Java中的闪光点：ThreadLocal是线程Thead的局部变量，可替代同步机制的设计，值得学习和研究
线程局部变量ThreadLocal,是Java支持的一种线程安全机制,目的是解决多线程的并发问题. 具体来讲,就是多个线程访问该实例对象的变量时,该实例对象将其存储为键值对的形式,保证各个线程(键)分 ...
- Dynamic V Strongly Typed Views
Come From https://blogs.msdn.microsoft.com/rickandy/2011/01/28/dynamic-v-strongly-typed-views/ There ...
- Build subversion 1.8 with SSL on OS X Yosemite
mkdir -p /tmp/buildroot && cd /tmp/buildroot # Need to build the latest libtool and automake ...
- js处理url参数
var UrlArgent = { Parsed: false, //是否已解析 Cache: {}, //缓存值 ParseArg: function () { // 解析地址栏的参数值 UrlAr ...
- onethink入门笔记(二)
5.onethink页面端获得后台服务器传值的方法 1:一般后台通过assign的值前台通过{$value}显示出来; 2:如果需要在js中使用 则可以通过 在js中写 var m = "{ ...
- python 赋值、表达式
赋值的特性 赋值语句建立对象引用 变量名在首次赋值时会被创建 变量名在引用前必须先赋值 赋值语句的形式 序列赋值 >>> A, B = 1, 2 >>> print ...
- backup3
private void changLayoutTemp2(IActiveView activeView, IPageLayout pageLayout, IPageLayout pTempPageL ...
- JUC.Condition学习笔记[附详细源码解析]
目录 Condition的概念 大体实现流程 I.初始化状态 II.await()操作 III.signal()操作 3个主要方法 Condition的数据结构 线程何时阻塞和释放 await()方法 ...
- Postgresql-xl 调研
Postgresql-xl 调研 来历 这个项目的背后是一家叫做stormDB的公司.整个代买基于postgres-xc.开源版本应该是stormdb的一个分支. In 2010, NTT's Ope ...