关于输入字段的更改，如何将ajax结果(值)放到我想要和需要的html td (表格单元格)中

Question

我是jQuery & Ajax的新手，有一个我不理解的问题。

在html_purchase页面中，我有：

<table>
<tr>
<td style="width:5%"><input type="text" name="prdct_cod[]" id="response"   onchange="showUser()"/></td>
<td style="width:8%" class="category-image"><input type="text"  name="pdct_name" readonly="readonly"/></td>
<td style="width:15%" id="tdName"><input type="text"  name="pdct_desc" readonly="readonly"/></td>
<td style="width:8%"><input type="text"  name="pdct_price" readonly="readonly" id="td-name"/></td>

</tr>
</table>

现在，我希望当我在第一个输入字段中输入一个值时，该值通过Ajax传递到getuser.php页面，在从数据库表中获取所需的结果(i.eProdct_name、Prodct_quintity和Prodct_price)之后，该结果将显示在我想要显示它们的那些输入只读字段中.我的(Ajax) getuser.phpcode是；

<?php
      include("include/classess/db.php");
      include("include/classess/user.php");
      include("include/classess/insertion.php");


      $q = intval($_GET['qp']);
mysql_select_db("ajax_demo");
$sql="SELECT * FROM products WHERE p_code = '".$q."'";

$result = mysql_query($sql);
$response = array();
$i=0;
while($row = mysql_fetch_array($result)){
  $response[$i]['p_name']        = $row['p_name'];
  $response[$i]['p_code']        = $row['p_code'];
  $response[$i]['p_description']  = $row['p_description'];
  $response[$i]['p_quantity']       = $row['p_quantity'];
  $response[$i]['price']          = $row['price'];
  $i++;
  }
echo json_encode($response);
?>

我的jQuery代码是(我在html_purchse页面的标题中添加的)：

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
 $.ajax({
        url: 'getuser.php',
        dataType: 'json',
        success: function(response){
            data = '';
            $.each(response,function(i,val){
             data = '<td class="category-image">'+val.p_name+'</td>'+
            '<td class="category-link"><a href="#">'+val.p_description+'</a></td>'+
            '<td class="category-desc"><p>'+val.p_quantity+'</p> </td>'+
            '<td class="rating5" >'+val.price+'</td>';
            $('<td>').attr('id',i).html(data).appendTo('#response');
            request.done(function(msg) {
                        $("#response").html(msg);          
                    });

                    request.fail(function(jqXHR, textStatus) {
                        alert( "Request failed: " + textStatus );
                    });
        })
        }
    })
</script>

Answer 1

您应该在输入字段上使用input事件。我还建议您采用松耦合方法，以提高可读性和可维护性。还意味着您将DOM/HTML操作代码从XHR代码中分离出来。

NB:，如果您只从ServerSide得到一个对象，那么发送一个对象，而不是一个数组。但是，如果您选择发送一个数组，那么在showData函数中执行var response = response[0];来获取数组中的第一个对象，假设数组中只有一个对象。

希望这能有所帮助。

$('#response').on('input', getData);

function getData(e) {
    var p_code = $(this).val(),
        request = $.ajax({
            url: 'getuser.php',
            method: 'POST',
            data: {'p_code': p_code}, // send the id/p_code as an object and grab it in your PHP script.
            dataType: 'json'
        });
        request
            .done(showData) // pass in the showData callback to handle the HTML manipulation for you
            .fail(errorHandler); // do whatever you like
}

函数将实际数据显示到字段中。

function showData(response) {
    var $table = $('table');
    $table.find('[name="pdct_name"]').val(response.p_name);
    $table.find('[name="pdct_desc"]').val(response.p_description);
    $table.find('[name="pdct_price"]').val(response.price);
}


function errorHandler(jqXHR, textStatus, errorThrown) {
    console.log('jqXHR', jqXHR);
    console.log('textStatus', textStatus);
    console.log('errorThrown', errorThrown);
}