jQuery-Ajax

$(selector). load()方法

  • jQuery load()方法:jQuery load()方法是简单但强大的Ajax方法。load()方法从服务器加载数据,并把返回的数据放入被选元素中。
  • $(selector).load(URL,data,callback)
  • 必须的URL参数规定希望加载的URL;可选的data参数规定与请求一同发送的查询字符串键值对集合;可选的callback参数是load()方法完成后所执行的函数名称。
  • 可选的callback参数规定党load()方法完成后所要允许的回调函数。回调函数可设不同参数:responseTxt:包含调用成功时的结果内容;statusTxt:包含调用的状态;xhr:包含XMLHttpRequest对象。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>load()测试</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>
<body>

<!--jQuery load() 方法-->
<!--jQuery load() 方法是简单但强大的 AJAX 方法。-->
<!--load() 方法从服务器加载数据,并把返回的数据放入被选元素中。-->
<!--语法:-->
<!--$(selector).load(URL,data,callback);-->
<!--必需的 URL 参数规定您希望加载的 URL。-->
<!--可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。-->
<!--可选的 callback 参数是 load() 方法完成后所执行的函数名称。-->
<!--可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。-->
<!--回调函数可以设置不同的参数:-->
<!--responseTxt - 包含调用成功时的结果内容-->
<!--statusTxt - 包含调用的状态-->
<!--xhr - 包含 XMLHttpRequest 对象-->
<!--下面的例子会在 load() 方法完成后显示一个提示框。-->
<!--如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:-->

<button>click</button>
<div id="div1"></div>
<script type="text/javascript">
    $('button').click(function () {
        $('#div1').load('demo_test.txt',function (responseTxt, statueTxt, xhr) {
            if(statueTxt=='success')
                alert('外部内容加载成功!');
            if(statueTxt=='error')
                alert('error: '+xhr.status+': '+xhr.statusText);
        });
    });
</script>
</body>
</html>

jQuery get() 和 post() 方法

  • 两种在客户端和服务器端进行请求-响应的常用方法:get和post。

  • get:从制定的资源请求数据; post:向指定的资源提交要处理的数据。

  • get方法:

    - 注意:get方法查询字符串(键值对)是在get请求的URL中发送的!!
    - get请求可被缓存
    - get请求保留在浏览器历史记录中
    - get请求可被收藏为书签
    - get请求有长度限制
    - get请求只应当用于取回数据
  • post方法:
    - 注意:post查询字符串(键值对)是在post请求的HTTP消息主体中发送的!!
    - post请求不会被缓存
    - post请求不会保留在浏览器历史记录中
    - post请求不能被收藏为书签
    - post请求对数据长度没有要求

这里写图片描述


 - 代码实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get()  post()</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btGet').click(function () {
                $.get('materials/jQuery_get_post.asp',function (data, status) {
                    alert('数据: '+ data + '\n 状态: ' + status);
                });
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btPost').click(function () {
                $.post('materials/jQuery_post.asp',
                    {
                        name:'sunxiao',
                        city:'Qingdao'
                    },
                    function (name,status) {
                        alert('姓名: ' + name + '\n城市: ' + status)
                    }
                );
            })
        });
    </script>
</head>
<body>

<!--jQuery $.get() 方法-->
<!--$.get() 方法通过 HTTP GET 请求从服务器上请求数据。-->
<!--语法:-->
<!--$.get(URL,callback);-->
<!--必需的 URL 参数规定您希望请求的 URL。-->
<!--可选的 callback 参数是请求成功后所执行的函数名。-->

<!--$.post() 方法通过 HTTP POST 请求从服务器上请求数据。-->
<!--语法:-->
<!--$.post(URL,data,callback);-->
<!--必需的 URL 参数规定您希望请求的 URL。-->
<!--可选的 data 参数规定连同请求发送的数据。-->
<!--可选的 callback 参数是请求成功后所执行的函数名。-->

<button id="btGet">GET</button>
<button id="btPost">POST</button>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值