如何使用 jQuery 和 JSON 加载数据？答案

【问题标题】：How to load data using jQuery and JSON?如何使用 jQuery 和 JSON 加载数据？
【发布时间】：2010-10-25 02:40:56
【问题描述】：

我想使用 jQuery 和 JSON 将数据从 MySQL 数据库加载到 PHP 页面。当用户从选择框中选择姓名时，它会将人的数据加载到文本字段中。

这是我的 HTML 代码（选择）

<select name='name' id='name'>
    <option value='1'>John</option>
    <option value='2'>Marco</option>
    <option value='3'>Charles</option>
</select>

我想用人员数据填充的文本字段：

<input type='text' name='firstname' value='' id='firstname'/>
<input type='text' name='phonenum' value='' id='phonenum'/>

getpersonData.php

<?php
    include('dbconfig.php');
    $id = $_POST['id'];
    $query = "select * from person where ID='$id'";
    $result = mysql_query($query);
    $data = mysql_fetch_array($result);

    echo json_encode($data);
?>

Ajax 调用：

$.ajax({
    type: "POST",
    async : false,
    url: 'http://test.com/getpersonData.php',
    dataType: 'json',
    data : {
        id : $("#id").val(),
    },
    success : function(data) {
        //What to insert here?        
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
    }
});

success 函数应该使用什么代码？

【问题讨论】：

不要将任何用户数据直接插入代码，就像将$_POST['id'] 插入select * from person where ID='$id' 一样。这使您的代码对SQL injection 开放。从过时的mysql驱动切换到PDO和prepared statements。
另外，你 shouldn't use SELECT * 在这里。结果行应作为关联数组获取，而不是作为关联数组和数值数组的组合。两者都做只会导致更长的响应消息。
感谢您的建议。我现在就读:)
@outis 虽然“SELECT *”并不好，但我认为您的意思是“不要使用 mysql_fetch_array”。它应该是 mysql_fetch_array($result, MYSQL_ASSOC) 或只是 mysql_fetch_assoc($result)
如果您需要 PDO 教程，请尝试“Writing MySQL Scripts with PHP and PDO”。但是，不要让这阻止您搜索其他人。

标签： php jquery ajax json

【解决方案1】：

首先，您应该在getpersonData.php 中回显您的json_encode 之前设置您的Content-type 标头：

header("Content-type: application/json");
echo json_encode($data);

在您的成功函数中，您会执行以下操作：

$("#firstname").val(data.firstname); //firstname is the key of the user's firstname from your mysql query

【讨论】：

【解决方案2】：

我在这里猜你的数据库列名，但可能是这样的

$('#firstname').val(data.firstname);
$('#phonenum').val(data.phonenum);

【讨论】：

谢谢。现在要去测试了！ :D
不要忘记像 Calvin 指出的那样设置 content-type 标头

【解决方案3】：

getpersonData.php

<?php
include('dbconfig.php');
$id = $_POST['id'];
$query = "select * from person where ID='$id'";
$result = mysql_query($query);
$data = mysql_fetch_array($result);

header("Content-type: application/json");
echo json_encode($data); ?>

主文件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Load JSON data through jQuery and PHP </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
        load_data($('#name').val());
    $('#name').change(function(){
        load_data($('#name').val());
    });
});
function load_data(personid)
{
       $.getJSON("getpersonData.php", {id: personid}, function(data){
           $('#firstname').val(data['firstname']);
        $('#phonenum').val(data['phonenum']);
     });    
}
</script>
</head>
<body>
<select name="name" id="name">
<option value='1'>John</option>
    <option value='2'>Marco</option>
    <option value='3'>Charles</option>
</select>
   <input type='text' name='firstname' value='' id='firstname'/>
<input type='text' name='phonenum' value='' id='phonenum'/>
</body>
</html>

【讨论】：

感谢您发布您的答案！请务必仔细阅读FAQ on Self-Promotion。另请注意，每次链接到自己的网站/产品时，都要求发布免责声明。