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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
Vue 技巧之控制父类的 slot
Feb 24 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通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP count()函数讲解
2019/02/03 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
js微信支付实现代码
2016/12/22 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
应用数学自荐书范文
2013/11/24 职场文书
学习方法演讲稿
2014/05/10 职场文书
企业文化标语大全
2014/06/10 职场文书
护理学专业求职信
2014/06/29 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
2015年副班长工作总结
2015/05/15 职场文书