jQuery-Ajax

来源：互联网发布：wowhead数据库编辑：程序博客网时间：2024/05/27 09:48

$(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>

0 0