長島冰茶的工程師筆記

呼叫 ajax

<script src='/sys/lib/js/jquery.js'></script>
<script>
        /* 一般陣列 */
        var arr1 = [];
            arr1[0] = 1;
            arr1[1] = 3;
            arr1[3] = 8;
        
        /* 有 key 的陣列 */
        var arr2 = {no0:'哈,哈',no3:'1,23'};
        
        /* 二維陣列 */
        var arr3 = [ {id:1,type:3}, {id:3,type:2}, {id:1001,type:3} ];

        $j.ajax({
                 url: 'http_ajax.php',
                 cache: false,
                 dataType: 'html',
                 type:'POST',                
                 data: {arr1:arr1, arr2:arr2, arr3:arr3},
                 error:function(){alert('Ajax request 發生錯誤');},
                 success: function(res){alert('Ajax success!');}
               });
</script>

接收的php: http_ajax.php

<?
    print_r($_POST);
?>

==== 執行結果 ====
Array
(
    [arr1] => Array
        (
            [0] => 1
            [1] => 3
            [2] => undefined
            [3] => 8
        )

    [arr2] => Array
        (
            [no0] => 哈,哈
            [no3] => 1,23
        )

    [arr3] => Array
        (
            [0] => Array
                (
                    [id] => 1
                    [type] => 3
                )

            [1] => Array
                (
                    [id] => 3
                    [type] => 2
                )

            [2] => Array
                (
                    [id] => 1001
                    [type] => 3
                )

        )
)

另外，這裡看到一個缺點，如果是一般的陣列
但是索引值不連續的時候，就會如 arr1 一樣出現 undefined 的值
而且如果索引值很大，那麼 undefined 的數量會很多，而且都要經過 post 傳遞，會造成很大的負擔
最近才發現可以在 JavaScript 用物件的方式來存，就可以避免這個問題，以下請看程式範例

<script src='/global/js/jquery.js'></script>
<script>
        /* 一般陣列 */
        var arr1 = [];
            arr1[0] = 1;
            arr1[1] = 3;
            arr1[3] = 8;

        /* 使用物件方式建立類似 key -> value 的陣列 */
        var arr2 = {};
            arr2[0] = 1;
            arr2[1] = 3;
            arr2[3] = 8;

        $.ajax(
        {
                 url: 'http_ajax.php',
                 cache: false,
                 dataType: 'html',
                 type:'POST',
                 data: {arr1:arr1, arr2:arr2},
                 error:function(){alert('Ajax request 發生錯誤');},
                 success: function(res){alert('Ajax success!');}
        });
</script>

 

==== 執行結果 ====

Array
(
    [arr1] => Array
        (
            [0] => 1
            [1] => 3
            [2] => 
            [3] => 8
        )

    [arr2] => Array
        (
            [0] => 1
            [1] => 3
            [3] => 8
        )

)

註：
雖然是 arr2 是使用陣列的方式在給值，但因為一開始是宣告 arr2 是物件
所以不管是用 arr2.key 或是 arr2[key] 的方式來指定，arr2 都可以正確的執行(JavaScript 的彈性)