我想使用 AJAX 从 MySQL 获取数据并显示答案

【问题标题】：I want get data from MySQL using AJAX and show我想使用 AJAX 从 MySQL 获取数据并显示
【发布时间】：2019-07-22 10:28:17
【问题描述】：

我有一个问题，我想使用 ajax 从 mysql 中获取数据并显示在一个下拉列表中（选择标签）。

我的问题是如何向 jQuery 发送数据？

AJAX ja_drop.php

$query = "SELECT list_id,link,title FROM tbl_list ORDER BY title ASC;";

    $result = mysqli_query($dblink, $query);

    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        while($row = mysqli_fetch_assoc($result)) {

            $results[] = $row;

        }
    } 

    print_r($results);

jQuery 代码

$.post("ja_drop.php")
.done(function(obj) {

    $("#ts56").text(obj);

// i want a loop statments for show data detail but not work any loop here

});

当我将接收对象打印到我的 jQuery 代码时，它会显示以下结果：

[0] => Array (
    [list_id] => 25
    [link] => http://213.217.33.27/z_tree/znv3/test1.htm
    [title] => Ab Madani Damavand (WL-Tehran-Tehran Tower)(10.234.159.59)(1395925)
    )
[1] => Array (
    [list_id] => 35
    [link] => http://213.217.33.27/z_tree/znv3/test1.htm
    [title] => Ab Madani Damavand (WL-Tehran-Tehran Tower)(10.234.159.59)(1395925)
    )
[2] => Array (
    [list_id] => 36
    [link] => http://213.217.33.27/z_tree/znv3/test1.htm
    [title] => Ab Madani Damavand (WL-Tehran-Tehran Tower)(10.234.159.59)(1395925)
    )
[3] => Array (
    [list_id] => 37
    [link] => http://213.217.33.27/z_tree/znv1/test1.htm
    [title] => Ab Madani Damavand (WL-Tehran-Tehran Tower)(10.234.159.59)(1395925)
    )

如您所见，我上面的数组有 4 个索引但是当我想要打印数组长度时显示错误的数字

$("#ts56").text(obj.length);  // show 902

【问题讨论】：

Returning JSON from a PHP Script的可能重复

标签： php jquery arrays fetch

【解决方案1】：

在 ajax ja_drop.php 中使用 json_encode 以 json 格式返回响应

echo json_encode($results);

在 jquery 中使用 JSON.parse() 解析响应，数据变成一个 JavaScript 对象。

jQuery 代码。

$(document).ready(function() {
    $.post("ja_drop.php") .done(function(obj) {

        //Parse the data with JSON.parse(), and the data becomes a JavaScript object.
        var data = JSON.parse(obj);

        //use each loop to get the data from response link, title etc
        $.each(data, function(index, value) {
           console.log("<a href='"+value.link+"' title='"+value.title+"'>"+value.title+"</a>");
        });
    });

 });

【讨论】：

很高兴帮助你..:)

【解决方案2】：

使用dataType 选项接受JSON 格式的响应。

// -- ja_drop.php ----------
$query = "SELECT list_id,link,title FROM tbl_list ORDER BY title ASC";
$result = mysqli_query($dblink, $query);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        $results[] = $row;
    }
}
echo json_endcode($results);


// -- jquery code ----------
$.ajax({
    url: "ja_drop.php",
    type: "POST",
    dataType: "json",

    contentType: false,
    cache: false,
    processData:false,
    success: function(data)
    {
        console.log(data.length); // this will return 4 
        // process the data using loop
        $.each(data, function(i, e) {
            console.log(e.list_id);
            console.log(e.link);
            console.log(e.title);
        })
    },
    error: function() {}
});

【讨论】：