使用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 实现无刷新页面.其原理.代码库.代码. 这 ...
随机推荐
- hadoop namenpde机制
1:通过查看hadoop的临时目录,看到有fsimage和edit文件 2:fsimage时namenode的元数据内存镜像文件,edit文件时hadoop客户端的操作记录, edit_inproce ...
- stimulsoft Report报表使用笔记
1.使用设计器设计mrt报表模板,或者从其他文件复制修改 2.删除business object 数据源 3.使用代码添加数据源 ParcelChangeItem change = new Parce ...
- 解压版mysql安装
步骤如下: 1.下载安装包 2.在环境变量中配置安装包的bin路径 3.修改安装包下的my-default.ini. 修改basedir和datadir的值为解压文件对应的路径,port和 serve ...
- arcgis中DEM如何生成等高线
地形图指比例尺大于1∶100万的着重表示地形的普通地图(根据经纬度进行分幅,常用有1:100万,1:50万,1比25万,1:15万,1:10万,1:5万等等).由于制图的区域范围比较小,因此能比较精确 ...
- nginx修改配置后不生效的问题
nginx增加了新的server name配置,发现nginx -s reload之后总是不生效. http和https均可以打开页面,但是页面是别的server页面,使用的证书也是别的server的 ...
- MATLAB 文件对话框之图片格式转换
localpathname为当前路径,需要保存图片的位置,根据自己的实际路径设置,usedpathname用来保存打开的文件位置,方便下次打开文件对话框以上次的路径为默认路径. global used ...
- VUE 入门基础(9)
十一,深入响应式原理 声明响应式属性 由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值. var vm = new Vue({ data:{ // ...
- SSM项目配置随笔
一.自动扫描 使用Annotation自动注册Bean:在主容器中不扫描@Controller注解,在SpringMvc中只扫描@Controller注解. 1.spring配置文件(扫描注解) &l ...
- phpMyAdmin登录出错
问题:在网页上登录phpMyAdmin后出错 You don't have permission to access /phpMyAdmin/ on this server. 查询找到解决方法,记录一 ...
- poj3461 Oulipo(KMP模板)
Oulipo Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17795 Accepted: 7160 Descripti ...