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 选择器 xpath 语法应用
May 13 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
基于ionic实现下拉刷新功能
May 10 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php下载文件的代码示例
2012/06/29 PHP
js几个验证函数代码
2010/03/25 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
初学python数组的处理代码
2011/01/04 Python
haskell实现多线程服务器实例代码
2013/11/26 Python
python 实现两个npy档案合并
2020/07/01 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
上班迟到检讨书
2014/01/10 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
代办出身证明书
2014/10/21 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
地道战观后感300字
2015/06/04 职场文书
外出学习心得体会范文
2016/01/18 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python