使用PHP信息的Ajax

Question

我在使用AJAX調用后從PHP文件中獲取的信息時遇到問題。 我目前有以下單擊按鈕后觸發的AJAX代碼：

<script>
    $(document).ready(function(){
        $('.button').click(function(){
            $.ajax({
                  type: "POST",
                  url: "nano.php",
                  data: { action: "authenticate" }
                }).done(function( msg ) {
                  alert( "Done: " + msg );
                });    
        });
    });
</script>

在nano.php文件中，我做了一些身份驗證和信息獲取。 在我的PHP代碼的最后，我執行以下操作：

  print_r($member_info);
  print_r($activity_info);

此信息（兩個包含大量信息的數組）出現在Ajax done函數中調用的警告框中，這意味着此信息在客戶端可用。

我希望能夠處理數組並在頁面上顯示信息。 print_r是發送信息的正確方法嗎？ 在此之后，如何在頁面中處理和顯示數組中的信息？

Answer 1

要通過AJAX將PHP文件中的數組發送回Javascript，請使用：

echo json_encode($array);

也適用於字符串。

並在jQuery.ajax調用中將預期的響應類型更改為json ：

$.ajax({
  type: "POST",
  url: "nano.php",
  dataType: 'json',
  data: { action: "authenticate" }
}).done(function( msg ) {
   alert( "Done: ");
   console.log(msg); // <- javascript array or object
 }); 

（或從PHP發送application/json內容類型標頭）

Answer 2

正確的方法是在你的html中使用空標記，例如<div id="response"></div>

在你的PHP：

print_r(json_encode($member_info));
print_r (json_encode($activity_info));

在你的ajax調用中使用這個div來保存ajax響應，如下所示：

 $.ajax({
                  type: "POST",
                  url: "nano.php",
                  data: { action: "authenticate" }
                }).done(function( msg ) {
                  $("#response").html(msg);
                });    

Answer 3

在JSON中返回一條消息，稍后在jQuery中管理它會更容易。

PHP：

$data = array( 'some_var' => 'some_value' );
echo json_encode( $data );
exit;

然后在jQuery中：

<script>
$(document).ready(function(){
    $('.button').click(function(){
        $.ajax({
              type: "POST",
              url: "nano.php",
              data: { action: "authenticate" }
            }).done(function( msg ) {
                var data_object = JSON.parse(msg); // Create a Javascript object/array from the JSON
                // Here you can use the data inside the array/object
                alert( data_object.some_var );
            });    
    });
});
</script>