使用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 实现无刷新页面.其原理.代码库.代码. 这 ...
随机推荐
- ios中，在SearchBar里面搜索内容，可根据内容来查找所需的信息资源，可获得SearchBar中的内容
贴一段我很久以前写的小demo,你们就明白了,是把textField套在alertView里的@interface ViewController : UIViewController <UIAl ...
- Linux学习笔记2_mysql安装
查看文件内容的命令有很多:cat, tac, more, less, head, tail, nl. cat由第一行开始显示档案内容:tac从最后一行开始显示,可以看出tac是cat的倒着写:more ...
- vuex 笔记
Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...
- CSS3 动画实现 animation 和 transition 比较
在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...
- 全站 HTTPS 来了(转载)
转载:本文为腾讯Bugly原创文章. 最近大家在使用百度.谷歌或淘宝的时候,是不是注意浏览器左上角已经全部出现了一把绿色锁,这把锁表明该网站已经使用了 HTTPS 进行保护.仔细观察,会发现这些网站已 ...
- ReactJS学习笔记(一)
1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script> &l ...
- Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697
详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...
- opencv嫁接vlfeat densesift
#include <opencv2/opencv.hpp> #include <iostream> extern "C" { #include <vl ...
- [转]逻辑斯蒂回归 via python
# -*- coding:UTF-8 -*-import numpydef loadDataSet(): return dataMat,labelMat def sigmoid(inX): retur ...
- discuz中方法
discuz中检验是否是邮箱 function isemail($email) { && strlen($email) <= && preg_match(&quo ...