jquery ajax 局部无刷新更新数据的实现案例


Posted in Javascript onFebruary 08, 2014

要更新的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
    <select id="lucky1" onchange="return duoduo();">
        <option value="1">第一期</option>
        <option value="2">第二期</option>
    </select>
    <div id="duoduo">
        你好</div>
       <input type="text" id="duo"  />
</body>
<script type="text/javascript">
    function duoduo() {
        $.ajax({
            type: 'post', //可选get
            url: 'ajax.aspx', //这里是接收数据的程序
            data: 'data=' + $("#lucky1").val(), //传给PHP的数据,多个参数用&连接
            dataType: 'html', //服务器返回的数据类型 可选XML ,Json jsonp script html text等
            success: function(msg) {
                //这里是ajax提交成功后,程序返回的数据处理函数。msg是返回的数据,数据类型在dataType参数里定义!
                document.getElementByIdx_x_x("duoduo").innerHTML = msg;
                //$("#duoduo").innerHTML = msg;
            },
            error: function() {
                alert('对不起失败了');
            }
        })
    }
</script>
</html>

操作页面
  protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Params["data"].ToString().Equals("1"))
        {
            Response.Write("<a href=\"http://www.baidu.com\">第一期</a>");
        }
        else if (Request.Params["data"].ToString().Equals("2"))
        {
            Response.Write("<a href=\"http://www.baidu.com\">第2期</a>");
        }
    }
Javascript 相关文章推荐
jquery解决客户端跨域访问问题
Jan 06 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
jquery ajax 局部刷新小案例
Feb 08 #Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 #Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 #Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 #Javascript
javascript运行机制之this详细介绍
Feb 07 #Javascript
jQuery获取当前对象标签名称的方法
Feb 07 #Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python中turtle库的简单使用教程
2020/11/11 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
超市商业计划书
2014/05/04 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
团日活动总结格式
2015/05/11 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
详解Redis瘦身指南
2021/05/26 Redis