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 相关控件的事件操作分解
Aug 03 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
整理一下常见的IE错误
Nov 18 Javascript
jQuery实现验证码功能
Mar 17 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
原生js滑动轮播封装
Jul 31 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
在vue中使用image-webpack-loader实例
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
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
JS中的多态实例详解
2017/10/15 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
Python continue语句用法实例
2014/03/11 Python
python中字符串前面加r的作用
2015/06/04 Python
python实现简易云音乐播放器
2018/01/04 Python
python 自定义对象的打印方法
2019/01/12 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python语言进阶知识点总结
2019/05/28 Python
python获取栅格点和面值的实现
2020/03/10 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
综合测评个人总结
2015/03/03 职场文书
员工规章制度范本
2015/08/07 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
matlab xlabel位置的设置方式
2021/05/21 Python
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技