Javascript 用ajax从数据库中获取数据

get the data from database with ajax

提问by Sheraz Khan

i want to get the data from database through ajax but its gives me only one record not other but i want all the records from database i have search too much to understand the problem but can't get that

我想通过ajax从数据库中获取数据，但它只给了我一条记录而不是其他记录，但我想要数据库中的所有记录我搜索了太多以理解问题但无法得到

that is database image

那是数据库图像

php code

代码

 //-------------------------------------------------------------------------- 
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $host = "localhost";
  $user = "root";
  $pass = "";

  $databaseName = "search";
  $tableName = "ajax01";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $array = mysql_fetch_row($result);                          //fetch result    

  //--------------------------------------------------------------------------
  // 3) echo result as json 
 //--------------------------------------------------------------------------
  echo json_encode($array);

?> 

html

html

  <!-------------------------------------------------------------------------
  1) Create some html content that can be accessed by jquery
 -------------------------------------------------------------------------->
  <h2></h2>


  <script id="source" language="javascript" type="text/javascript">

  $(function () 
  {
//-----------------------------------------------------------------------
// 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
//-----------------------------------------------------------------------
$.ajax({                                      
  url: 'api.php',                  //the script to call to get data          
  data: "",                        //you can insert url argumnets here to    pass to api.php
                                   //for example "id=5&parent=6"
  dataType: 'json',                //data format      
  success: function(data)          //on recieve of reply
  {
   // var id = data[0];              //get id
  //  var vname = data[1];           //get name
    //--------------------------------------------------------------------
    // 3) Update html content
    //--------------------------------------------------------------------
    $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+name); //Set output     element html
    //recommend reading up on jquery selectors they are awesome 
    // http://api.jquery.com/category/selectors/
  } 
});
 }); 

  </script>
 </body>
</html>

回答by Quentin

You only ever get one row.

你只会得到一排。

$array = mysql_fetch_row($result);  

$array = mysql_fetch_row($result);  

You need to loop that line and keep going until you run out of rows (creating an array of row arrays as you go).

您需要循环该行并继续运行，直到行数用完（随时创建行数组数组）。

Then json_encodethat final array.

然后json_encode是最后的数组。

回答by tcak

The mysql_fetch_rowtakes only one record from result of query. You need to store each row of query result in an array, then finally convert the array to its JSON representation.

在mysql_fetch_row需要从查询结果只有一个记录。您需要将查询结果的每一行存储在一个数组中，然后最终将数组转换为其 JSON 表示形式。

$records = [];

while( $row = mysql_fetch_row( $result ) ){
    array_push( $records, $row );
}

echo json_encode( $records );

Substitute the mysql_fetch_rowand json_encodelines of your code with this to achieve it.

用此替换代码的mysql_fetch_row和json_encode行以实现它。

回答by tcak

THe best way to do this, use 3 different files;

最好的方法是使用 3 个不同的文件；

• php_page.php
• script.js
• php_handler.php

• php_page.php
• 脚本.js
• php_handler.php

In the php_page.php you have have actually the HTML In the script.js you make the request with ajax In php_handler.php you give the response and there you can make the connection and take all the data from your database that you need!

在 php_page.php 中，您实际上拥有 HTML 在 script.js 中，您使用 ajax 发出请求 在 php_handler.php 中，您给出响应，然后您就可以建立连接并从数据库中获取您需要的所有数据！

php_page.php

php_page.php

<!doctype html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <ul id="list">
            <!-- In here comes the data! -->
        </ul>

        <button id="button">Get Data</button>
    </body>
</html>

script.js

脚本.js

$(document).ready(function() {
    $("#list").on("click", function() {
        $.ajax({
            url: "php_handler.php"
        }).done(function(data){
            $(this).empty().append("<li>"+ data +"</li>");
        });
    });
});

php_handler.php

php_handler.php

<?php
$con = mysqli_connect($host, $user, $pass, $db);

$query = mysqli_query($con, "SELECT [FIELD_NAME] FROM [TABLE_NAME]");

foreach($query as $data)
{
    echo '<li>' . $data . '</li>';
}
?>