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 Base类 包含基本的方法
Jul 22 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
JS中的phototype详解
Feb 04 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
使用Ajax实现进度条的绘制
Apr 07 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根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
three.js 入门案例详解
2018/01/23 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Pandas 按索引合并数据集的方法
2018/11/15 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
详解python中的线程与线程池
2019/05/10 Python
python django model联合主键的例子
2019/08/06 Python
Python实现AI换脸功能
2020/04/10 Python
简单的Python人脸识别系统
2020/07/14 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
外企办公室竞聘演讲稿
2013/12/29 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
自荐信的格式
2014/03/10 职场文书
自行车广告词大全
2014/03/21 职场文书
请假条范文大全
2014/04/10 职场文书
小学生通知书评语
2014/12/31 职场文书
捐款通知怎么写
2015/04/24 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
java设计模式--三种工厂模式详解
2021/07/21 Java/Android