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 @ 04/21/2008 (11:37 am)

Flash(as3) 中提交表单数据

as2 中我们经常利用 LoadVars 对象提交/接收 表单数据, as3 中应该如何实现呢?

也很容易, 参考下面的代码:

PLAIN TEXT >> ACTIONSCRIPT:
  1. // LoadVarsBot.as
  2. package
  3. {
  4.     import flash.events.Event;
  5.     import flash.events.IOErrorEvent;
  6.    
  7.     import flash.net.URLLoader;
  8.     import flash.net.URLRequest;
  9.     import flash.net.URLRequestMethod;
  10.     import flash.net.URLVariables;
  11.    
  12.     import flash.display.Sprite;
  13.     import flash.text.TextField;
  14.    
  15.     public class LoadVarsBot extends Sprite
  16.     {
  17.         // 接收表单数据 URL 对象
  18.         private var ur:URLRequest = new URLRequest();
  19.         // 提交数据对象
  20.         private var ul:URLLoader = new URLLoader();
  21.         // 表单对象
  22.         private var uv:URLVariables = new URLVariables();
  23.         // debug text
  24.         private var debugText:TextField = new TextField();
  25.        
  26.         public function LoadVarsBot()
  27.         {
  28.             ul.addEventListener(Event.COMPLETE, loadCompleteHandler);
  29.             ul.addEventListener(IOErrorEvent.IO_ERROR, loadErrorHandler);
  30.            
  31.             ur.url = "post.php";
  32.             ur.method = URLRequestMethod.POST;
  33.             ur.data = uv;
  34.            
  35.             // 绑定表单数据
  36.             uv.v1 = "test 1";
  37.             uv.v2 = "test 2";
  38.             // 提交表单
  39.             ul.load(ur);
  40.            
  41.             debugText.textColor = 0xff0000;
  42.             debugText.width = 500;
  43.             addChild(debugText);
  44.         }
  45.        
  46.         /**
  47.          * 表单发送成功
  48.          * */
  49.         private function loadCompleteHandler(evt:Event):void
  50.         {
  51.             // evt.target.data 保存表单返回数据
  52.             debugText.text = evt.target.data;
  53.         }
  54.        
  55.         private function loadErrorHandler(evt:IOErrorEvent):void
  56.         {
  57.             // IO 错误, 例如页面不存在
  58.             debugText.text = evt.text;
  59.         }
  60.     }
  61. }