如何在ajax请求中显示php返回的json数组

时间:2016-02-07 10:30:24

标签: php jquery json ajax

我的 Ajax 请求看起来像这样

  $.ajax({
         type: "POST",
        url: "new1.php",
       dataType: "json",
        data: { name: $('#name-typed').val()},
        success: function(response) {
        $('.cartcontainer').append(' <div class="cartproduct"><img src="images/deletesm.png" height="18" width="18" alt="deleteproduct" id="delete" data-toggle="tooltip" data-placement="bottom" title="Delete Product"/><span class="cartlist"><span><img src="images/wheatthumbnail.png" alt="ricethumbnail" class="cartcontent thmbnail" /></span><ul class="cartcontent"><li class="col"> </li><li class="col">'+ response.id + '</li><li class="crtqtymanuplator"><button>-</button><input type="text" id="crtcountholder" /><button>+</button></li></ul></span></div> ')
    }
  });

我的php文件看起来像new1.php看起来像这样

<?php


$servername = "localhost";
$username = "root";
$password = "";

// Create connection
$conn = new mysqli($servername, $username, $password,"mydb");

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
$sql = "SELECT id FROM names";
$result = $conn->query($sql);
$jsonData = array();

while ($array = mysql_fetch_row($result)) {
    $jsonData['id'] = $array;
}
echo json_encode($jsonData);
else {
    echo "0 results";
}
$conn->close();
?>

我想要的是显示id作为json数组返回。怎么做?

3 个答案:

答案 0 :(得分:2)

使用$jsonData['id'][] = $array;代替$jsonData['id'] = $array;

还可以避免打印额外的内容,例如&#34; 0结果&#34;当你期望JSON输出时。

答案 1 :(得分:2)

您发送到服务器varibale $ _POST ['name'],我假设您必须收到一个具有此名称的Id ...在new1.php中尝试此代码

$name = $_POST['name'];
$sql = "SELECT id FROM names WHERE `name` = ? LIMIT 1";
$stmt  = $conn->prepare($sql);
$stmt->bind_param("s", $name);
$stmt->execute();
$result = $stmt->get_result();

while ($array = $result->fetch_assoc()) {
    $jsonData = $array;
}
echo json_encode($jsonData);
$conn->close();
?>

答案 2 :(得分:2)

有几件事要处理:

1。将内容类型声明为JSON

在回显JSON之前,在我们的PHP代码中添加以下行:

header("Content-Type: application/json");

2。不要输出除JSON

以外的任何内容

此代码与内容类型冲突无效:

else {
    echo "0 results";
}

您没有if与此else块匹配,但您可能尝试简化问题的代码,而不是看到它变为无效。

无论如何,完全删除此块。如果您if测试与此else匹配的行数,请将其删除。

JSON输出就足够了。

3。输出超过最后一个ID

您的查询会返回ID列表,但您目前只保留最后一个ID。所以改变那段代码:

$jsonData = array('id' => array());
while ($array = mysql_fetch_row($result)) {
    $jsonData['id'][] = $array;
}

或者,如果您确实只想获取一个特定ID,那么请更改您的SQL语句,以便它只检索特定用户的ID。 @Aleksandr在his answer中发现了这一点,所以我在此不再重复。给他信任。

尽管如此,即使您将SQL更改为仅返回1条记录,上述更改和以下建议仍然有效。

4。使用模板HTML而不是长HTML字符串

回调中的HTML字符串很长且难以阅读。在HTML中使用模板标记,在其中将HTML插入不可见的div中,如下所示:

<div id="template1" style="display:none">
    <div class="cartproduct">
        <img src="images/deletesm.png" height="18" width="18"
             alt="deleteproduct" id="delete" data-toggle="tooltip" 
             data-placement="bottom" title="Delete Product"/>
        <span class="cartlist">
            <span>
                <img src="images/wheatthumbnail.png" alt="ricethumbnail"
                     class="cartcontent thmbnail" />
            </span>
            <ul class="cartcontent">
                <li class="col"></li>
                <li class="col">$1</li>
                <li class="crtqtymanuplator">
                    <button>-</button>
                    <input type="text" id="crtcountholder" />
                    <button>+</button>
                </li>
            </ul>
        </span>
    </div>
</div>

上面的HTML有 $ 1 来标识应该注入ID的位置。 然后你的JavaScript会检索那个不可见模板元素的innerHTML,注入ID并附加它。请参阅下一点下的代码。

4。处理多个ID

在JavaScript代码中,您目前只处理一个ID。与上面的更改一样,响应将是一个数组,更改像这样的JavaScript成功回调,利用模板HTML。

请注意,如果ID可以包含任何字符,则应确保将其转义。但如果ID是数字,则不需要此步骤:

success: function(response) {
    if (response.id !== undefined) {
        response.id.forEach(function (id) {
            // Escape id for use in HTML (Not needed if ID is numerical)
            id = $('<div/>').text(id).html();
            // Get template HTML, and inject id
            var html = $('#template1').html().replace(/$1/g, id);
            $('.cartcontainer').append(html);
        });
    } else {
        console.log('invalid response', response);
    }
}