Question

Ajax Jquery无法在php页面中运行。我想在同一个php页面中检索mysql数据库而不刷新页面。通过从数据列表中选择选项，其他文本框将根据列表填写。请帮我找错。谢谢。

这是我的javascript代码

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
        $(document).ready(function(){
            $("#item").change(function(){
                //alert("Changed");
                $.ajax({

                    type:"POST",
                    url:"json.php",
                    data:{item:$("#item").val()},
                    success: function(data){
                        var iobj = $.parseJSON(data);
                        $.each(iobj, function(){
                            $("#item").val(this['hsn']);
                            $("#pack").val(this['pack']);
                        });
                    }
                });
            });
        });
    </script>

php文件

<td valign="middle">
  <input list="code" name="item" id="item" class="textbox" tabindex="8">
   <td valign="middle">

  <?php
   $item=mysqli_query($con,"SELECT itname,itemcode FROM itementry");
   echo '<datalist id="code" width="150%" style="font-size:30px;">';
   while($row=mysqli_fetch_array($item)){

   $itm = $row['itname'] .'|' .$row['itemcode'];
   $ITMMM = $row['itemcode'];
   echo '<optgroup>';
   echo '<option value="'.$ITMMM.'" style="font-size: 50px;">';

   echo '</option>';
   echo '</optgroup>';
    }
   echo '</datalist>';
   ?>
 </td>
 <td valign="middle"><input type="text" name="hsn" id="hsn" class="textbox" tabindex="9"></td>
 <td valign="middle"><input type="text" name="pack" id="pack" class="textbox" tabindex="10"></td>
 <td valign="middle"><input type="text" name="rack" id="rack" class="textbox" tabindex="11"></td>
 <td valign="middle"><input type="text" name="punit" id="punit" class="textbox" tabindex="12"></td>

json.php

    <?php
include 'connect.php';
$item = $_POST['item'];
$start = strpos($item,'|')+2;
$code = substr($item, $start);
echo 'Item code:'.$item;

$sql = "select * from itementry where itemcode  ='".$item."'";
$result = mysqli_query($con, $sql)or die(mysqli_error($con));

$rows = array();

while ($r = mysqli_fetch_assoc($result)){
    $rows[]=$r;    
}
echo json_encode($rows);
?>

Answer 1

好的，所以我已经拿走了你的代码并从中编造了一些东西......

根据您提供的内容，本答案“Works”中提供的代码。它得到一个响应，并填写另外两个hsn和pack表单输入，这是你的问题。

仔细观察它，看看你有什么和什么不同。

测试数据库

<?php
$con = mysqli_connect('localhost','root','test','phptutorials_st9');

<强> connect.php

<?php
include 'connect.php';
?>

<td valign="middle">
    <label>Item</label>
    <input list="code" name="item" id="item" class="textbox" tabindex="8">
<td valign="middle">

    <?php
    $item = mysqli_query($con, "SELECT itname,itemcode FROM itementry");
    //var_dump($item->num_rows);
    echo '<datalist id="code" width="150%" style="font-size:30px;">';
    //@TB Added MYSQLI_ASSOC to only get associative entries
    while ($row = mysqli_fetch_array($item, MYSQLI_ASSOC)) {
        $itm = $row['itname'] . '|' . $row['itemcode']; // Where is this used
        $ITMMM = $row['itemcode'];
        echo '<optgroup>';
        echo '<option value="' . $ITMMM . '" style="font-size: 50px;">';
//@TB Added
//        echo $itm;
        echo '</option>';
        echo '</optgroup>';
    }
    echo '</datalist>';
    ?>
</td>
<td valign="middle"><input type="text" name="hsn" id="hsn" class="textbox" tabindex="9"></td>
<td valign="middle"><input type="text" name="pack" id="pack" class="textbox" tabindex="10"></td>
<td valign="middle"><input type="text" name="rack" id="rack" class="textbox" tabindex="11"></td>
<td valign="middle"><input type="text" name="punit" id="punit" class="textbox" tabindex="12"></td>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="list.js"></script>

<强>的index.php

$(document).ready(function () {
    // $("#item").on('change', function () {
    $("#item").change(function () {
        var item = $("#item").val();
        console.log('Item Changed');
        $.ajax({
            type: "POST",
            url: "json.php",
            data: {item: item},
            success: function (data) {
                var iobj = $.parseJSON(data);
                console.log(iobj);
                $.each(iobj, function () {
                    $("#hsn").val(this['hsn']);
                    $("#pack").val(this['pack']);
                });
            }
        });
    });
});

<强> list.js

<?php
include 'connect.php';
$item = $_POST['item'];
$start = strpos($item,'|')+2;
$code = substr($item, $start);
//echo 'Item code:'.$item;
$sql = "SELECT * FROM itementry WHERE itemcode  ='".$item."'";
$result = mysqli_query($con, $sql)or die(mysqli_error($con));

$rows = array();

while ($r = mysqli_fetch_assoc($result)){
    $rows[]=$r;
}
echo json_encode($rows);

<强> json.php

parse

我无法回答所有问题，因为这不是代码审查，而是值得关注的事情。

与变量命名一致，不要使用$ itm这样的短名称你也使用$ itname。那意味着是$ item_name吗？然后你使用$ ITMMM（所有大写字母）不知道这意味着什么。
与使用mysqli一致。你使用mysqli_fetch_array和mysqli_fetch_assoc ...可能坚持使用mysqli_fetch_assoc - 查找它们！
了解您使用浏览器开发人员工具并在验证jquery / AJAX内容时使用控制台。

JQuery不在php页面中工作

1 个答案: