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 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
json 定义
2008/06/10 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
代收款委托书范本
2014/10/01 职场文书
个人求职信格式范文
2015/03/20 职场文书
监理中标通知书
2015/04/16 职场文书
法院答辩状格式
2015/05/22 职场文书