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 相关文章推荐
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
Vue中props的详解
May 16 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
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
php文件操作实例代码
2012/05/10 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php和asp语法上的区别总结
2019/05/12 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
vue+webpack中配置ESLint
2018/11/07 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
python的常见命令注入威胁
2013/02/18 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
社区党员志愿服务活动方案
2014/08/18 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
创业计划书之书店
2019/09/10 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Minikube搭建Kubernetes集群
2022/03/31 Servers
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python