JSON編碼不AJAX功能

Question

我建立一個事件來改變與Ajax和JSON編碼混淆的產品名稱正常工作

<div class="new-product-name"></div> 
<div class="new-product-num"></div> 

然後腳本是

$(function(){ 
    $.ajax({ 
    method: "POST", 
    url: "fetch-product.php", 
    data: {keyword: 12} 
    }).done(function(msg){ 
    $(".new-product-name").html(msg); 

    $.getJSON("fetch-product.php", function(data) { 
     $(".new-product-name").html(data.a); 
     $(".new-product-num").html(data.b);   
    }); 
    }); 
}); 

在 fetch-

product.php

$query = "SELECT * FROM `product_details` WHERE id='". $_POST['keyword']."'"; 
$result = $conn->query($query); 

if ($result->num_rows > 0) { 
    $row = $result->fetch_assoc(); 
    $name=$row["p_name"]; 
    $num=$row["num"]; 
} 

echo json_encode(array("a" => $name, $num)); 

此處的產品詳細信息正在提取正確，即使在$(".new-product-name").html(msg);它顯示'{"a":"Product1", "b":"22"}'，它進入到$.getJSON("fetch-product.php", function(data) { }

但data.a，data.b顯示null。

爲什麼是data.a，data.bnull？我花了太多時間。請幫助解決這個錯誤。

Answer 1

我看不出有任何理由對PHP腳本進行2次調用。

如果添加dataType:json參數，jQuery將期望從PHP返回JSONString，並且msg將自動轉換爲javascript對象。

$(function(){ 
    $.ajax({ 
     method: "POST", 
     dataType: "json",   // new param 
     url: "fetch-product.php", 
     data: {keyword: 12} 
    }) 
    .done(function(msg){ 
     if (msg.status == 1) { 
      $(".new-product-name").html(msg.a); 
      $(".new-product-num").html(msg.b); 
     } else { 
      $(".new-product-name").html(msg.info); 
     } 
    }); 
}); 

的另一個問題與您的來電$.getJSON("fetch-product.php",.....的是，這將發出一個GET請求，因此填補了$_GET陣列的任何參數。您的PHP代碼不會查找在$_GET陣列中傳遞的參數！

您的PHP代碼因爲它很容易受到SQL注入的影響，所以我修改了它以使用參數化的&準備好的語句。

你還需要考慮你的查詢沒有發現任何東西，並返回一些讓javascript知道的可能性。

$query = "SELECT * FROM `product_details` WHERE id=?"; 
$stmt = $conn->prepare($query); 
$stmt->bind_param('i', $_POST['keyword']); 
$result = $stmt->execute(); 

if ($result->num_rows > 0) { 
    $row = $result->fetch_assoc(); 
    echo json_encode(array('status'=> 1, 
          'a'=>$row["p_name"], 
          'b'=>$row["num"]); 
} else { 
    echo json_encode(array('status'=>0, 
          'info'=>'No data found'); 
} 

Answer 2

正如@Sirko已經說過，您要發送兩個請求：

$(function(){ 
    $.ajax({ // First request, as planned 
    method: "POST", 
    url: "fetch-product.php", 
    data: {keyword: 12} 
    }).done(function(msg){ 
    $(".new-product-name").html(msg); 

    // This will send an additional GET request to fetch-product.php without any parameters 
    $.getJSON("fetch-product.php", function(data) { 
     $(".new-product-name").html(data.a);  
    }); 
    }); 
}); 

刪除第二個請求或第二取代第一，如果GET方法適用它應該工作的罰款。由於第二個請求返回null，所有類.new-product-name的html都將爲空（「」）。

Answer 3

$.ajax({ 
    method: "POST", 
    url: "fetch-product.php", 
    data: {keyword: 12} 
    }).done(function(msg){ 
    $(".new-product-name").html(msg); 

使得POST獲取產品和寫入的msg值到產品名稱元件。除了它應該可能是msg.a，因爲你的代碼返回一個包含a屬性內數據的對象。您還需要設置dataType:json選項，以便jQuery知道從服務器返回的值是對象而不是字符串。

但是，您然後對同一個URL發出另一個請求，但使用GET請求並且不傳遞任何參數。由於PHP只嘗試從POST請求中讀取值，因此這會導致查詢不返回任何內容，因此$name的輸出爲空。然後用這個空值覆蓋產品名稱元素。

爲什麼您向同一個資源發出第二次請求，但是使用錯誤的設置，這是一個完全謎。這是完全沒有必要的。此代碼應在單個請求中執行您所需的操作：

$(function(){ 
    $.ajax({ 
    method: "POST", 
    url: "fetch-product.php", 
    data: {keyword: 12}, 
    dataType: "json" 
    }).done(function(msg){ 
    $(".new-product-name").html(msg.a); 
    $(".new-product-num").html(msg.b); 
    }); 
}); 

P.S.您的SQL非常容易受到SQL注入攻擊。您應該切換到使用參數化查詢和準備好的語句。否則，有人可能會在「關鍵字」參數中發送惡意值，並竊取，破壞或以其他方式破壞您的數據。看到http://bobby-tables.com/這個問題的幽默但非常明顯的例子。用於PHP的PDO和mysqli庫都提供了創建預準備語句的簡單方法，並且有數百個在線語法示例供您參考。

Answer 4

如果你想使兩個PHP調用，那就試試這個：

取回product.php

<?php 
    if($_SERVER['REQUEST_METHOD'] == 'GET'){ 
    $keyword = $_GET['keyword']; 
}else{ 
    $keyword = $_POST['keyword']; 
} 

$query = "SELECT * FROM `product_details` WHERE id='". $keyword."'"; 
$result = $conn->query($query); 

if ($result->num_rows > 0) { 
$row = $result->fetch_assoc(); 
$name=$row["p_name"]; 
$num=$row["num"]; 
} 

echo json_encode(array("a" => $name, $num)); 

?> 

那麼腳本是

$(function(){ 
var data = {keyword: 12}; 

$.ajax({ 
method: "POST", 
url: "fetch-product.php", 
data: data 
}).done(function(msg){ 
$(".new-product-name").html(msg); 

$.getJSON("fetch-product.php",{keyword: 12}).done(function(data1) { 
    $(".new-product-name").html(data1.a);  
    }); 
    }); 
});