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中ajax学习笔记4
Oct 16 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
vue.js中实现登录控制的方法示例
Apr 23 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
vue的mixins属性详解
2018/03/14 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python assert语句的简单使用示例
2019/07/28 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python实现FTP循环上传文件
2020/03/20 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
单位单身证明范本
2014/01/11 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
世界遗产导游词
2015/02/13 职场文书
雷锋电影观后感
2015/06/10 职场文书
班主任工作总结范文
2015/08/13 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python