如何使用jquery ajax获取php url的json_encode数据?

Question

autocomplete-api.php

<?php
session_start();
error_reporting(0);
include("includes/config.php");
$data = array();
$query = "SELECT product_name FROM inventory group by product_name;";
$query .= "SELECT name FROM brands;";
$query .= "SELECT name FROM categories;";
mysqli_multi_query($con,$query);
$result = mysqli_store_result($con);
while($row = mysqli_fetch_assoc($result)) 
{
$data[] = array(
'products' => $row['product_name']
);
}
mysqli_free_result($result);
mysqli_next_result($con);
$result = mysqli_store_result($con);
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array(
'products' => $row['name']
);
} 
mysqli_free_result($result);
mysqli_next_result($con);
$result = mysqli_store_result($con);
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array(
'products' => $row['name']
);
} 
mysqli_free_result($result);
mysqli_close($con);
$results = json_encode($data);
print($results);
?>

自动完成.js

function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
$.ajax({
type:"GET",
url:"http://localhost/leafteaculture/autocomplete-api.php",
datatype:"JSON",
success:function(json){
alert(json);
/*$.each(json, function(key, item) {
var countries =  item.products;
alert(countries);
});*/
}
});

索引.php

<input type="text" name="pro_duct" id="pro_duct" />
<script src="<?php echo $base_url; ?>assets/js/autocomplete.js"></script>
<script>
autocomplete(document.getElementById("pro_duct"), countries);
</script>

可能是重复的问题。我已经创建了自动完成建议框，其中我autocomplete-api.php使用了json_encode功能，该功能工作正常，但文件autocomplete.js问题。我无法从autocomplete-api.php文件中获取数据。我想从 url 获取数据并将其放入 jquery 变量autocompelete-api.php。那么，我该怎么做呢？请帮助我。

谢谢

Answer 1

可能的问题可能是，由于您使用了返回string的json_encode，并且在 AJAX 请求中指定了要JSONdataType，AJAX 无法在响应中找到所需的 dataType。您可以简单地从 AJAX 请求中删除 dataType 属性。获取数据后，需要使用JSON.parse将字符串转换为 JSON 格式。

有关详细信息，请参阅 AJAX 文档和json_encode。

希望这有帮助。

Answer 2

我认为首先要修复的是你的php文件 - 让我们把这件事归结起来。 通过使用UNION关键字形成单个/更高效的查询，您可以维护相同的查询逻辑/resulset，而麻烦要少得多。

session_start();
header('Content-type: application/json');
include("includes/config.php");
if (!$result = $con->query("(SELECT product_name AS products FROM inventory GROUP BY product_name) UNION (SELECT name FROM brands) UNION (SELECT name FROM categories)")) {
echo [];  // check $con->error; because your query failed
} else {
echo json_encode($result->fetch_all(MYSQLI_ASSOC));
}

是的，它真的可以减少那么多！ 这是查询有效的证明。

从相同的数据中，下面是生成的 json 字符串：

[{"products":"One"},{"products":"Three"},{"products":"Two"},{"products":"Four"},{"products":"Five"},{"products":"Six"},{"products":"Seven"},{"products":"Eight"}]

然后，你的 javascript 接收 json 字符串，调用var apiArray = = JSON.parse(json);，以便你可以使用包含单列数据的多维数组。

---

。p.s. 如果您担心重复的产品名称，可以在查询中剔除重复项：

SELECT DISTINCT product FROM (
(SELECT product_name AS product FROM inventory GROUP BY product_name)
UNION
(SELECT name FROM brands)
UNION
(SELECT name FROM categories)
) Unionized