Question

我是jQuery＆amp;的新手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页面，并从数据库表中获取所需的结果（即Protod_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事件。我还建议你采用松耦合方法来实现可读性和可维护性。也意味着您从XHR代码中分割DOM / HTML操作代码。

NB：如果从ServerSide返回1个Object，则发送一个Object而不是一个数组。但是，如果您选择发送数组，那么在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);
}

从输入字段更改如何将ajax结果（值）带入html td（表格的单元格）我想要和需要的地方

1 个答案: