jquery ajax 局部无刷新更新数据的实现案例

 更新时间:2014年02月08日 09:09:58   作者:  
这篇文章主要对jquery ajax 局部无刷新更新数据的实现案例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

要更新的页面

复制代码 代码如下:

<!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>");
        }
    }

相关文章

  • 实例讲解jquery与json的结合

    实例讲解jquery与json的结合

    这篇文章主要介绍了jquery与json的结合,分为三个阶段,设计htm页面,使用jQuery编写AJAX请求文件,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 一个可绑定数据源的jQuery数据表格插件

    一个可绑定数据源的jQuery数据表格插件

    此文将实现一个的jQuery表格插件jQuery.DataGrid。需要的朋友可以参考下。
    2010-07-07
  • jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】

    jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery插件HighCharts绘制2D饼图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制饼图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • jquery实现图片无缝滚动 蒙版遮蔽效果

    jquery实现图片无缝滚动 蒙版遮蔽效果

    这篇文章主要为大家详细介绍了jquery实现图片无缝滚动,蒙版遮蔽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

    jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

    这篇文章主要介绍了jquery实现仿新浪微博带动画效果弹出层代码,具有可关闭及可拖动的功能,涉及jQuery针对鼠标事件的响应及页面元素属性的变换功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 使用jQuery实现返回顶部

    使用jQuery实现返回顶部

    博客园是程序员们比较喜欢的聚集地,很多人喜欢发发心得,一直都觉着挺好的,但最不满意他的一点是,没有返回到顶部的功能,好吧,我们自己来添。
    2015-01-01
  • 创建公共调用 jQuery Ajax 带返回值

    创建公共调用 jQuery Ajax 带返回值

    请求Ajax 带返回值,并弹出提示框提醒的实现代码,需要的朋友可以参考下
    2012-08-08
  • jQuery选择器之属性过滤选择器详解

    jQuery选择器之属性过滤选择器详解

    这篇文章主要为大家详细介绍了jQuery选择器之属性过滤选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • jQuery中nextAll()方法用法实例

    jQuery中nextAll()方法用法实例

    这篇文章主要介绍了jQuery中nextAll()方法用法,实例分析了nextAll()方法的功能、定义及查找匹配元素之后所有的同辈元素使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery 源码分析笔记(2) 变量列表

    jQuery 源码分析笔记(2) 变量列表

    在初始化jQuery对象的代码开始之前声明了一大堆变量。主要包括:全局变量的备份;处理字符串用的正则表达式;检测浏览器的正则表达式;对核心函数的引用备份。这里略过大部分,只说两种:全局变量和浏览器检测。
    2011-05-05

最新评论