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 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 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
mysq GBKl乱码
2006/11/28 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
javascript函数库-集合框架
2007/04/27 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
JavaScript模块详解
2017/12/18 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python虚拟环境项目实例
2017/11/20 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
安全环保演讲稿
2014/08/28 职场文书
学生上课说话检讨书
2014/10/25 职场文书
八月迷情观后感
2015/06/11 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书