使用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 实现无刷新页面.其原理.代码库.代码. 这 ...
随机推荐
- Python体验(07)-图形界面之菜单
顺序安装以下程序: python解释器:https://www.python.org/downloads/ wxPython图形界面框架包:http://www.wxpython.org/ pycha ...
- IaaS, PaaS, SaaS 解释
IaaS.PaaS.SaaS作为云计算三种服务模式,下面会着重介绍他们的定义.作用.功能.对应产品以及他们之间的关系等. 一.定义: SaaS:Software as a Service,软件 ...
- 仿Spring读取配置文件实现方案
一.读取config和jar里的配置文件,以流的方式返回 /** * 根据路径,获取当前项目中路径(jar包和config文件)下的配置文件 * @param filePath 存放job配置信息文件 ...
- ssh 的搭建
struts包的下载:http://struts.apache.org/download.cgi#struts252 string包的下载: http://repo.spring.io/release ...
- JS数组转成json字符串的注意事项
在js中常常会将一个数组转成json字符串发送给后端. 这时候在定义数组数据结构的时候需要格外注意,意味json中是有集合和对象的区别的. 集合的定义是[];对象的的定义是{}. 这时候,在创建数组时 ...
- location.hash详解
一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如, http://www.example.com/index.html#print 就代表网页index.html的prin ...
- switch(){}default后是有冒号的
switch: function a(c,d){ switch(c+d){ : console.log(); break; : console.log(); break; : console.log( ...
- ArcGIS api fo silverlight学习一（silverlight加载GeoServer发布的WMS地图）
最好的学习资料ArcGIS api fo silverlight官网:http://help.arcgis.com/en/webapi/silverlight/samples/start.htm 一. ...
- 在SQLSERVER中快速有条件删除海量数据技巧推荐
解释: 如果你的硬盘空间小,并且不想设置数据库的日志为最小(因为希望其他正常的日志希望仍然记录),而且对速度要求比较高,并清除所有的数据建议你用turncate table1,因为truncate 是 ...
- python环境
官网:https://www.python.org windows环境:http://www.cnblogs.com/windinsky/archive/2012/09/20/2695520.html ...