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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
json数据处理及数据绑定
Jan 25 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
浅析JS中NEW的实现原理及重写
Feb 20 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
js创建数组的简单方法
2016/07/27 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
js模块加载方式浅析
2017/08/12 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python多进程共享变量
2016/04/06 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python for循环中的陷阱详解
2018/07/13 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
python装饰器代替set get方法实例
2019/12/19 Python
Django通过json格式收集主机信息
2020/05/29 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
法制宣传标语集锦
2014/06/25 职场文书
小学班级管理心得体会
2016/01/07 职场文书
手残删除python之后的补救方法
2021/06/26 Python