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版Tab标签切换
Mar 16 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
js中创建对象的几种方式
Feb 05 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 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
php split汉字
2009/06/05 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
jquery构造器的实现代码小结
2011/05/16 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
Java如何支持I18N?
2016/10/31 面试题
中学劳技课教师的自我评价
2014/02/05 职场文书
《穷人》教学反思
2014/04/08 职场文书
爱之链教学反思
2014/04/30 职场文书
大型会议策划方案
2014/05/17 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python