通过jQuery和PHP加载JSON数据

时间:2013-04-29 06:34:27

标签: php jquery ajax

我试图通过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);
        }
    }

 ?>

2 个答案:

答案 0 :(得分:0)

您的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);

此处dataobject而不是array

答案 1 :(得分:0)

  

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

我能看到的是......你的问题中有一个错字......

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

 $(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