使用Ajax從mysql表中檢索數據

Question

我正在嘗試使用Ajax顯示MySQL數據。 不幸的是，我找不到正確的方法。 我試圖在選擇框上顯示MySQL數據。 當我單擊“選擇類別”選項時，所有類別將顯示為下拉列表。

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）捕獲所選選項並使用它執行另一個DB查詢，返回新數據。

請查看以下修改（未試用）的代碼示例：

<!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示例（底部的三個鏈接，但也請注意第一個鏈接的信息）。 將它們復制到您的服務器並使它們工作-與它們一起玩：

使用jQuery的AJAX請求回調

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 個解決方案

解決方案1
1 2016-06-07 18:57:54

解決方案2
1 2016-06-07 19:03:33

解決方案3
0 2016-06-07 20:14:56

使用Ajax從mysql表中檢索數據

問題描述

3 個解決方案

解決方案1 1 2016-06-07 18:57:54

解決方案2 1 2016-06-07 19:03:33

解決方案3 0 2016-06-07 20:14:56

解決方案1
1 2016-06-07 18:57:54

解決方案2
1 2016-06-07 19:03:33

解決方案3
0 2016-06-07 20:14:56