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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
Prototype Template对象 学习
Jul 19 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 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
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python 获取字符串MD5值方法
2018/05/29 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
Django添加sitemap的方法示例
2018/08/06 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python线程池如何使用
2020/05/28 Python
爱心捐款倡议书
2014/04/14 职场文书
营销团队口号
2014/06/06 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
英文辞职信范文
2015/05/13 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL