Question

我试图使用Ajax显示MySQL数据。不幸的是，我无法找到正确的方法。我试图在选择框上显示MySQL数据。当我点击＆＃34;选择类别＆＃34;选项然后所有类别将显示为下拉列表。

here is my HTML code.

<!DOCTYPE html>
 <html>
 <head>
 <title>PHP MySQL Insert Tutorial</title>
 <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
 </head>

 <body>
 <select id='category'>

 </select>
 <script src='fetch.js'></script>
 </body>
</html>

我已使用此JS代码发送请求。这是我的JS代码。

$('#category').onclick(function(){
     $.getJSON(
         'fetch.php',

         function(result){
             $('#category').empty();
             $.each(result.result, function(){
             $('#category').append('<option>'+this['category']+'</option>');
             });
         }
     );
});

我使用这个php代码来完成ajax请求和数据库连接。这是我的PHP代码。

<?php
 define('HOST','localhost');
 define('USERNAME', 'root');
 define('PASSWORD','');
 define('DB','ajax');

 $con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);

 $category = $_GET['category'];

 $sql = "select category from ajaxx where category='$category'";

 $res = mysqli_query($con,$sql);

 $result = array();

 while($row = mysqli_fetch_array($res)){
 array_push($result, 
 array('category'=>$row[0]));
 }

 echo json_encode(array('result'=>$result));


    enter code here

 mysqli_close($con);
?>

Answer 1

当你发出AJAX请求时，就是这个URL：

fetch.php

但是在服务器端代码中，您尝试获取查询字符串值：

$category = $_GET['category'];

您无法获得从未提供的查询字符串值。因此，当您构建SQL查询（顺便提一句 对SQL注入 开放时）时，无法从数据库中获取任何内容。

如果要使用查询字符串值，则必须提供一个：

$.getJSON(
     'fetch.php?category=someValue',
     function(result){
         //...
     }
 );

您提供的价值或获得该价值的地方取决于您。（也许来自$('#category').val()？）但在使用它之前必须存在。

Answer 2

您可能会混淆两件事：（a）最初获取HTML代码以填充<select>控件的选项，以及（b）捕获所选选项并使用它来执行另一个数据库查询，返回新的数据

请查看此修改后的（未经测试的）代码示例：

<!DOCTYPE html>
 <html>
 <head>
 <title>PHP MySQL Insert Tutorial</title>
 <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
 </head>

 <body>
 <select id='category'>

 </select>
 <div id="resultDIV"></div>
 <script src='fetch.js'></script>
 </body>
</html>

<强>的javascript / jQuery的：

    //Run on document ready to populate the dropdown box
    $(document).ready(function(){
    $.getJSON(function(){
        'fetch.php',
        function(result){
            $('#category').empty();
            $.each(result.result, function(){
                $('#category').append('<option>'+this['category']+'</option>');
            });
        }
    });

    $(document).on('click', '#category', function(){
        //run on click to take dropdown value and perform lookup
        myCat = $(this).val();
        $.ajax({
            type: 'post',
             url: 'getcategory.php',
            data: 'category=' +myCat,
            success: function(d){
                //if (d.length) alert(d);
                $('#resultDIV').html(d);
            }
        });
    });

}); //END document.ready

我使用这个php代码来完成ajax请求和数据库连接。这是我的PHP代码。

<?php
    /*** getcategory.php ***/

    define('HOST','localhost');
    define('USERNAME', 'root');
    define('PASSWORD','');
    define('DB','ajax');

    $con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);

    $category = $_GET['category'];

    $sql = "select category from ajaxx where category='$category'";

    $res = mysqli_query($con,$sql);

    $result = array();

    while($row = mysqli_fetch_array($res)){
    array_push($result, 
    array('category'=>$row[0]));
    }

    echo json_encode(array('result'=>$result));


    enter code here

    mysqli_close($con);
?>

以下是一些要学习的基本，简单的AJAX示例（底部的三个链接，但也请注意第一个链接中的信息）。将它们复制到您的服务器并让它们工作 - 与它们一起玩：

AJAX request callback using jQuery

Answer 3

您的ajax代码需要进行一些更改：

<!DOCTYPE html>
 <html>
 <head>
 <title>PHP MySQL Insert Tutorial</title>
 <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
 <script type="text/javascript">
function myAjax ()
{ $.ajax( { type    : 'POST',
            data    : { 'category' : $('#txt_cat').val() }, // SEND CATEGORY.
            url     : 'fetch.php',
            success : function ( result )
                      { $( '#category' ).empty();
                        var arr = JSON.parse( result );
                        var sel = document.getElementById("category");
                        for ( i = 0; i < arr.length; i++ )
                        { var option = document.createElement( "option" );
                          option.text = arr[ i ];
                          sel.add( option );
                        }
                      },
            error   : function ( xhr )
                     { alert( "error" );
                     }
          }
        );
}
 </script>
 </head>
 <body>
   Enter category <input type="text" id="txt_cat"/>
   <button onclick="myAjax()">Click here to fill select</button>
   <select id='category'>
     <option> - empty - </option>
   </select>
 </body>
</html>

<强> fetch.php

<?php
$category = $_POST[ "category" ];           // CATEGORY FROM HTML FILE.
// CONNECT TO DATABASE AND QUERY HERE.
$result = Array( "111","222","333","444" );  // SAMPLE DATA.
echo json_encode( $result );
?>

使用ajax从mysql表中检索数据

3 个答案: