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 ready和load事件的区别示例介绍
Aug 30 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
jquery实现上传图片功能
Jun 29 jQuery
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python快速查找算法应用实例
2014/09/26 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
协议书的格式
2014/04/23 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
清明节演讲稿
2014/05/27 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers