欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

.NET中使用Jquery和Ajax(三) - load加载

程序员文章站 2022-04-30 13:10:09
首先创建两个webform页面,一个命名为default.x,用来显示load结果。 一个为ajax.aspx,用来被load。 比如我们在ajax.aspx中随便输入一些文字或者...

首先创建两个webform页面,一个命名为default.x,用来显示load结果。 一个为ajax.aspx,用来被load。

比如我们在ajax.aspx中随便输入一些文字或者其他,work hard, enjoy life~ 。

然后在defaut.aspx中 引入jquery 然后就可以开始我们的ajax load了。。

先在页面中插入一个botton 和两个div ,bottom用来触发load事件,div分别来载入load页面 和返回load结果。

html:

result:


其次我们来看一下load()函数:

load是最简单的ajax函数, 但是使用具有局限性:

1.它主要用于直接返回html的ajax接口

2.load是一个jquery包装集方法,需要在jquery包装集上调用,并且会将返回的html加载到对象中,

即使设置了回调函数也不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示load接口的使用:

load()函数:

函数介绍:load(url, [data], [callback]) 返回值:jquery

参数说明:

url:待装入 html 网页网址。

data:(可选参数)发送至服务器的 key/value 数据。

callback:(可选参数)载入成功时回调函数。

接下来可以写我们的load js了:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            $("#result").load("ajax.aspx", function (responestext, responsestatus) {
                $("#display").append(" responsetext : " + responestext);
                $("#display").append(" responsestatus : " + responsestatus);
            });
        });
    });
</script>
上述js代码中,让div id为result的返回ajax.aspx, div id 为 display的 显示返回的text 和status

最后,运行代码可以得出结果:

.NET中使用Jquery和Ajax(三) - load加载

.NET中使用Jquery和Ajax(三) - load加载

.NET中使用Jquery和Ajax(三) - load加载


至此,我们使用ajax的load()方法已成功实现。
接下来我们可以使用ajax中加入loading动画等等。