通过 jQuery 和 PHP 加载 JSON 数据

Question

我正在尝试通过 jQuery 和 AJAX 将文本框值（发票编号）发送到 PHP 文件。从 PHP 文件中，我返回 JSON 编码数据。我想在以下文本框（总金额、余额金额）和选择框（支付模式、支付状态）中显示从数据库中获取的值。

我没有得到我想要的输出。我哪里错了？

HTML：

    <form  name="inv_payment" method="post" action="" style="margin:0px;width:400px;">
    <fieldset>
        <legend>Payment details</legend>
        <label for=inv_num>Invoice Number</label>
            <input id=inv_num name=inv_num type=number placeholder="12345" required autofocus  >
            <input type=button name="get_details" id="get_details" value="Get Details"  >
            <label for=tot_amt>Total Amount</label>
            <input id=tot_amt name=tot_amt type=text placeholder="12345" disabled > <br/>
            <label for=pay_up>Pay Up </label>
            <input id=pay_up name=pay_up type=text placeholder="12345" required ><br/>
            <label for=bal_amt>Balance Amount&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input id=bal_amt name=bal_amt type=text placeholder="12345" disabled > <br/>
                <label id="paymt_mode"><strong>Payment Mode</strong></label>
                            <select name="pay_mode" style="width: 130px">
                            <option selected="selected">Cash</option>
                            <option>Cheque</option>
                            </select><br/>
                <label id="paymt_status"><strong>Payment Status</strong> </label>
                            <select name="pay_status" style="width: 130px">
                            <option selected="selected">Pending</option>
                            <option>Completed</option>
                            </select><br/>
            <input type="submit" value="Payment" name="pay_btn">
      </fieldset>
</form>

jQuery：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {


        $('#get_details').click(function() {

        //To pass the invoice number and fetch related details
        $.getJSON("get_invpay_details.php", {id: $('#inv_num').val()}, function(data){
            $('#tot_amt').val(data['Total_Amount']);
            $('#bal_amt').val(data['Balance_Amount']);
            $('#pay_mode').val(data['Payment_Type']);
                        $('#pay_status').val(data['Payment_Status']);
        });
              });
</script>

PHP：

    <?php 
        include('includes/dbfunctions.php');
        include('includes/db.php');
        if(isset($_GET['id']))
    {
                $tmp = $_GET['id'];
        $sql = mysql_query("select Total_Amount,Balance_Amount,Payment_Type,Payment_Status from invoice where InvoiceNum='$tmp'");
        if(mysql_num_rows($sql))
        {
            $data = mysql_fetch_array($sql);
            echo json_encode($data);
        }
    }

 ?>

Answer 1

您的 json 响应值使用 object.data 填充，如下所示。

$('#tot_amt').val(data.Total_Amount);
$('#bal_amt').val(data.Balance_Amount);
$('#pay_mode').val(data.Payment_Type);
$('#pay_status').val(data.Payment_Status);

这里data 是object 而不是array。

Answer 2

我检查了我的查询。它在 mysql 编辑器中给了我正确的输出。

我能看到的是..你的问题有错别字...

缺少}); for document.ready..这可能会破坏您的脚本..（虽然这应该在您的控制台中有错误..）..无论如何要检查一下..

 $(document).ready(function() {


    $('#get_details').click(function() {

    //To pass the invoice number and fetch related details
      $.getJSON("get_invpay_details.php", {id: $('#inv_num').val()}, function(data){
          $('#tot_amt').val(data['Total_Amount']);
          $('#bal_amt').val(data['Balance_Amount']);
          $('#pay_mode').val(data['Payment_Type']);
          $('#pay_status').val(data['Payment_Status']);
      });
    });
   });
  //^^--here