ajax之get、post

異步獲取數據:

<script type="text/javascript">
/**
 * [showstatus 獲取數據]
 * @return {[type]} [description]
 */
function showstatus()
{ 

    /**
     * [用post方式獲取數據]
     * @param  {[type]} user       [網頁用戶名]
     * @param  {[type]} password  [網頁用戶名密碼]
     * @param {[type]}  type          []
     */
    $.get("/demo/web/status/class.curstatus.php",{user:"admin",password:"admin",type:0},function(data, textStatus, xhr) 
        {
            // $("#datashow").html(data);
            var statusArr = eval("("+data+")");
            var curstatusArr = statusArr['info'];  
            // console.log(curstatusArr);

            for (var i = 0; i < curstatusArr.length; i++) {
                 for(var key in curstatusArr[i])
                 {
                     $("#"+key+i).text(curstatusArr[i][key]);
                 }
            };          

        });

    setTimeout("showstatus()",10000);
}

  $(function(){
      showstatus();
  }); 
</script>

異步提交數據：

 

<script type="text/javascript">


  $(function() {
          $("#product_uuid").focus();
          // alert(new Date());

          $("#submit").submit(function ()
          {
              // guard_form_submit.php
              jQuery.ajax({
                  url:'guard_form_submit.php',
                  type: 'post',
                  // dataType: 'text',
                  data:$("#guard_form").serialize(),
                  success: function (data) {


                      if(data.length > 0)
                      {
                          console.log(data)

                        if(data == "success")
                        {
                             // alert("hhhhhhhhh");
                             $("#addBox").text("保存成功");
                        }
                        else
                        {

                             $("#addBox").text("保存失敗");
                          
                        }
                        
                          $("#product_uuid").focus();
                          $("#product_uuid").val("");

                  
                        $("#addBox").toggle(1000);
                        // $("#addBox").toggle(1000);
                        

                      }

                      

                  }



              })
          })


  });    



</script>

 要點：

  一、使用$.get，$.post進行參數傳遞時，key不能爲變量，只能字符串

　　　　

       var sParam = arr[0]+"_"+arr[1];

       $.post('485_info_configuration_submit.php', {"Port": arr[0],"Type":arr[1],sParam:$("#"+sParam).val()}, function(data, textStatus, xhr) {}

  sParam不能的變量值不能傳遞。實際的key值爲sParam，而非sParam的變量值

  二、表單的序列化

    serialize()序列，轉化爲字符串，相似a=1&b=2&c=3

    serializeArray()序列化， json數據，後臺能夠直接用數組進行獲取解析

   後臺用Post獲取到的數據分別爲:

 

Array
(
    [serialForm] => returnURL=485_info_configuration.php&Port=4&Type=PowerCtrlStatus&1_PowerCtrlStatus=1&1_OutSingalStatus=0&2_PowerCtrlStatus=1&2_OutSingalStatus=0&3_PowerCtrlStatus=1&3_OutSingalStatus=0&4_PowerCtrlStatus=1&4_OutSingalStatus=1&5_PowerCtrlStatus=1&5_OutSingalStatus=0&6_PowerCtrlStatus=1&6_OutSingalStatus=0&7_PowerCtrlStatus=1&7_OutSingalStatus=1&8_PowerCtrlStatus=1&8_OutSingalStatus=0&9_PowerCtrlStatus=1&9_OutSingalStatus=1&10_PowerCtrlStatus=1&10_OutSingalStatus=0&11_PowerCtrlStatus=1&11_OutSingalStatus=1&12_PowerCtrlStatus=1&12_OutSingalStatus=0
)





(
    [serialForm] => Array
        (
            [0] => Array
                (
                    [name] => returnURL
                    [value] => 485_info_configuration.php
                )

            [1] => Array
                (
                    [name] => Port
                    [value] => 4
                )

            [2] => Array
                (
                    [name] => Type
                    [value] => PowerCtrlStatus
                )

            [3] => Array
                (
                    [name] => 1_PowerCtrlStatus
                    [value] => 1
                )

            [4] => Array
                (
                    [name] => 1_OutSingalStatus
                    [value] => 0
                )

            [5] => Array
                (
                    [name] => 2_PowerCtrlStatus
                    [value] => 1
                )

            [6] => Array
                (
                    [name] => 2_OutSingalStatus
                    [value] => 0
                )

            [7] => Array
                (
                    [name] => 3_PowerCtrlStatus
                    [value] => 1
                )

            [8] => Array
                (
                    [name] => 3_OutSingalStatus
                    [value] => 0
                )

            [9] => Array
                (
                    [name] => 4_PowerCtrlStatus
                    [value] => 1
                )

            [10] => Array
                (
                    [name] => 4_OutSingalStatus
                    [value] => 1
                )

            [11] => Array
                (
                    [name] => 5_PowerCtrlStatus
                    [value] => 1
                )

            [12] => Array
                (
                    [name] => 5_OutSingalStatus
                    [value] => 0
                )

            [13] => Array
                (
                    [name] => 6_PowerCtrlStatus
                    [value] => 1
                )

            [14] => Array
                (
                    [name] => 6_OutSingalStatus
                    [value] => 0
                )

            [15] => Array
                (
                    [name] => 7_PowerCtrlStatus
                    [value] => 1
                )

            [16] => Array
                (
                    [name] => 7_OutSingalStatus
                    [value] => 1
                )

            [17] => Array
                (
                    [name] => 8_PowerCtrlStatus
                    [value] => 1
                )

            [18] => Array
                (
                    [name] => 8_OutSingalStatus
                    [value] => 0
                )

            [19] => Array
                (
                    [name] => 9_PowerCtrlStatus
                    [value] => 1
                )

            [20] => Array
                (
                    [name] => 9_OutSingalStatus
                    [value] => 1
                )

            [21] => Array
                (
                    [name] => 10_PowerCtrlStatus
                    [value] => 1
                )

            [22] => Array
                (
                    [name] => 10_OutSingalStatus
                    [value] => 0
                )

            [23] => Array
                (
                    [name] => 11_PowerCtrlStatus
                    [value] => 1
                )

            [24] => Array
                (
                    [name] => 11_OutSingalStatus
                    [value] => 1
                )

            [25] => Array
                (
                    [name] => 12_PowerCtrlStatus
                    [value] => 1
                )

            [26] => Array
                (
                    [name] => 12_OutSingalStatus
                    [value] => 0
                )

        )

)

 

三、

     一、var sPost = 'Port:"'+arr[0]+'",Type:"'+arr[1]+'",'+sParam+':"'+$("#"+sParam).val()+'"'; 
      $.post('485_info_configuration_submit.php', {sPost}, function(data, textStatus, xhr) {}
    
    二、
      $.post('485_info_configuration_submit.php', {Port: arr[0],Type:arr[1],val:$("#"+sParam).val()}, function(data, textStatus, xhr) {}
    

後臺用POST獲取到的數據分別是:

 

Array
(
    [Port] => 3
    [Type] => PowerCtrlStatus
    [val] => 1
)



Array
(
    [sPost] => Port:\"3\",Type:\"PowerCtrlStatus\",3_PowerCtrlStatus:\"1\"
)