使用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 实现无刷新页面.其原理.代码库.代码. 这 ...
随机推荐
- WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default i
jdbc连接数据库候,对数据进行访问,访问正常当出现如下警告: WARN: Establishing SSL connection without server's identity verifica ...
- C++ 随机数
#include <iostream> #include <stdlib.h> #include <time.h> #define random(a,b) (ran ...
- android 非activity如何得到布局文件 （java文件中获取布局文件）
Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...
- ajax和json对象
二维数组 首先是输出json字符串的php文件 header("Content-type: text/html; charset=utf-8"); //json设置utf-8 $a ...
- Windows出现带空格文件名无法删除
下午同事的电脑上突然出现一个文件夹,怎么也删除不了,也无法重命名. 直接删除文件夹提示:无法读取源文件或磁盘. 然后查相关进程,未发现异常.重启进安全模式下删除,一样的结果,提示:无法读取源文件或磁盘 ...
- 让window.close不提示：您查看的网页正在试图关闭窗口。是否关闭此窗口？
正常来说,当我们调用window.close来关闭从地址栏中打开的窗口时,IE会弹出提示说:您查看的网页正在试图关闭窗口,是否关闭此窗口? 你可以将window.close替换成下边的脚本,然后再测试 ...
- px 和 em
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. ...
- Android之使用Android-query框架进行开发（一）(转载)
开发Android使用Android-query框架能够快速的,比传统开发android所要编写的代码要少得很多,容易阅读等优势. 下载文档及其例子和包的地址:http://code.google.c ...
- ORACLE 实例及RAC
ORACLE 实例及RAC 一.问题 (1)现象 部署一个sh脚本到生产oracle服务器上,该sh脚本负责读取外系统提供的txt文件,然后用sql loader入库,由oracle服务器的cront ...
- Python: 字典的基本操作
字典是Python里唯一的映射类型.字典是可变的.无序的.大小可变的键值映射,有时候也称为散列表或关联数组. 例子在下面: dic = {"apple":2, "oran ...