Seven Yu @ 09/03/2008 (12:41 am)

jQuery 中 get 和 post 方法传值需要注意的.

Tags: , , , ::

用 jQuery 的都知道,jQuery 的 get 和 post 方法有三个参数:地址,数据 和 回调函数,但我们知道地址也可以跟随数据的(形如:get_data.php?v1=1&v2=2),而且第二个参数可以省略,即第二个参数可以直接写回调函数,那么数据写在地址后面和写在 data 参数里有什么区别呢?

刚刚做了几个实验,看看下面的代码就清楚了:

jquery_data.php

PLAIN TEXT >> PHP:
  1. <?php
  2. echo "post: ";
  3. print_r($_POST);
  4. echo "get: ";
  5. print_r($_GET);
  6. ?>

jquery_test.html
实验1:

PLAIN TEXT >> JAVASCRIPT:
  1. $(function()
  2. {
  3.     // post 方法,两处都有数据
  4.     $.post('jquery_data.php?v1=1', {v2: 2}, function(data)
  5.     {
  6.         $('<pre/>').append(data).appendTo('body');
  7.     });
  8. });
  9. /*
  10. 返回结果:
  11. post: Array
  12. (
  13.     [v2] => 2
  14. )
  15. get: Array
  16. (
  17.     [v1] => 1
  18. )
  19. */

实验2:

PLAIN TEXT >> JAVASCRIPT:
  1. $(function()
  2. {
  3.     // post 方法,数据在地址后面, 第二个参数为回调函数
  4.     $.post('jquery_data.php?v1=1', function(data)
  5.     {
  6.         $('<pre/>').append(data).appendTo('body');
  7.     });
  8. });
  9. /*
  10. 返回结果,数据在 get 中:
  11. post: Array
  12. (
  13. )
  14. get: Array
  15. (
  16.     [v1] => 1
  17. )
  18. */

实验3:

PLAIN TEXT >> JAVASCRIPT:
  1. $(function()
  2. {
  3.     // get 方法,用 data 参数传值
  4.     $.get('jquery_data.php', {v2: 2}, function(data)
  5.     {
  6.         $('<pre/>').append(data).appendTo('body');
  7.     });
  8. });
  9. /*
  10. 返回结果,数据在 get 中:
  11. post: Array
  12. (
  13. )
  14. get: Array
  15. (
  16.     [v2] => 2
  17. )
  18. */

实验4:

PLAIN TEXT >> JAVASCRIPT:
  1. $(function()
  2. {
  3.     // get 方法,两处都有数据
  4.     $.get('jquery_data.php?v1=1', {v2: 2}, function(data)
  5.     {
  6.         $('<pre/>').append(data).appendTo('body');
  7.     });
  8. });
  9. /*
  10. 返回结果,两处数据被合并了,都在 get 中:
  11. post: Array
  12. (
  13. )
  14. get: Array
  15. (
  16.     [v1] => 1
  17.     [v2] => 2
  18. )
  19. */

实验5:

PLAIN TEXT >> JAVASCRIPT:
  1. $(function()
  2. {
  3.     // get 方法,两处都有数据,且变量名相同
  4.     $.get('jquery_data.php?v2=1', {v2: 2}, function(data)
  5.     {
  6.         $('<pre/>').append(data).appendTo('body');
  7.     });
  8. });
  9. /*
  10. 返回结果,数据在 get 中,且 data 参数中的数据覆盖了地址后面的数据:
  11. post: Array
  12. (
  13. )
  14. get: Array
  15. (
  16.     [v2] => 2
  17. )
  18. */

通过这几个简单的小例子不难看出,地址后面的数据永远是以 get 形式传递的,无论使用的是 get 方法还是 post 方法;而 data 参数中的数据是根据方法决定传递方式的。

因此,为了避免混淆,建议大家尽量不要把数据写在地址后面,而是统一放在 data 参数中。

当然,如果你想在用 post 方法时,同时利用 get 传值,那么就可以把要以 get 方式传递的数据写在地址后面,把要以 post 方式传递的数据写在 data 参数中。 :twisted:

总之方法是死的,人是活的,怎么用还要看实际情况。子曾经曰过:实践是检验真理的唯一标准。没事做做实验,掌握知识更牢固。 :wink:

Seven Yu @ 06/12/2008 (2:53 pm)

Beginning JavaScript with DOM Scripting and Ajax

Tags: , , , , ::

作者:Christian Heilmann

出版:Apress 2006
ISBN:9781590596807
格式:PDF;9MB;512页

下载:978-1-59059-680-7.rar

Seven Yu @ 05/28/2008 (10:49 pm)

Google Ajax Libraries API (Ajax 共享库)

Tags: , , , ::

Google 真的是做了件好事,在这个 Ajax 风行的时代来这么一玩意儿确实灰常灰常贴心、灰常灰常及时。

这个 Ajax Libraries API 有点像 Adobe 的 RSL (Runtime Shared Library),作用就是当 A B 站共用同一个 js 文件,用户访问了 A 站后,这个 js 文件被浏览器缓存下来,当用户再去访问 B 站时,该 js 文件就不会再去下载了,而是直接用缓存中的文件,节省了一定的流量。

一个几十 K 的 js 文件看似不起眼,但是统计一下,用到 google 提供的那些常用 Ajax 框架的网站数和文件数综合起来也将是个很可观的数字,我想 google 一定会丰富这个共享库,提供更多的支持。

google 目前提供的 Ajax 框架有:

加载框架文件有两种方式,一种是直接加载相应的 js 文件:

PLAIN TEXT >> JAVASCRIPT:
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

一种是利用 google 提供的接口:

PLAIN TEXT >> JAVASCRIPT:
  1. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  2. <script type="text/javascript">
  3. // Load jQuery
  4. google.load("jquery", "1");
  5. google.setOnLoadCallback(
  6. function(){
  7. // something you want to do.
  8. });
  9. // 除了 load 方法还有其他一些方法,详情请看官网
  10. </script>

Seven Yu @ 05/23/2008 (6:45 pm)

Beginning JavaScript with DOM Scripting and Ajax

Tags: , , , ::

作者:Christian Heilmann
出版:Apress 2006
ISBN:9781590596807
格式:PDF;9MB;512页
下载:978-1-59059-680-7.rar