使用AJAX和PHP进行数据检索

时间:2014-11-24 20:50:05

标签: php html mysql ajax

我正在尝试调用mysql服务器来检索一些产品并将它们转换为表格,但它似乎根本不起作用。

我只是在学习服务器端,所以任何解释都会很棒,谢谢你们!

list.php的:

<?php
$pdo = new PDO('mysql:localhost:8888;dbname=searchable-db', 'pim-admin', 'admin');
$select = 'SELECT *';
$from = ' FROM `products`';
$where = ' WHERE TRUE';
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute*();
$results=$statement->fetchAll(PD0::FETCH_ASSOC);
$json=json_encode($results);
echo($json);
?>

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>AJAX Filtering</title>
        <link rel="stylesheet" type="text/css" href="styles/styles.css">
    </head>


    <body>
        <h1>Product Database</h1>
        <div id="products"></div>

        <table id="pieces">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Company</th>
                    <th>Material</th>
                    <th>Category</th>
                    <th>Style</th>
                    <th>Color</th>
                </tr>
            </thead>
            </tbody>
            </tbody>
        </table>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <script>
            function updateProducts(){
                $.ajax({
                    type: "POST",
                    url: "list.php",
                    dataTyoe : 'json',
                    cache: false,
                    success: function(records){
                      $('#products').text(JSON.stringify(records, null, 4));
                    }
                });
            }

            updateProducts();

            function makeTable(data){
                var tbl_body = "";
                $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k, v) {
                tbl_row += "<td>"+v+"</td>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>"; 
                })
                 return tbl_body;
            }

            $('#pieces tbody').html(makeTable(records));
        </script>
    </body>
</html>

@SmileOff,这就是我现在所拥有的,没有错误,仍然无法调用我的数据:/

<script>
    function updateProducts(){
                    $.ajax({
                    type: "POST",
                    url: "includes/list.php",
                    success: function(records){
                        console.log($.parseJSON(records));
                    } 
                });

    updateProducts();

            function makeTable(data){
                var tbl_body = "";
                $.each(data, function() {
                var tbl_row = "";
                $.each(this, function(k, v) {
                tbl_row += "<td>"+v+"</td>";
                })
                tbl_body += "<tr>"+tbl_row+"</tr>"; 
                })
                 return tbl_body;
            }

            $('#pieces tbody').html(makeTable('records'));
        </script>

================= @SmileOff

JS

function updateProducts(){
                $.ajax({
                type: "POST",
                url: "includes/list.php",
                success: function(){
                    console.log($.parseJSON(records));
                }
            });
        }

            updateProducts();

                function makeTable(data){
                    var tbl_body = "";
                    $.each(data, function() {
                    var tbl_row = "";
                    $.each(this, function(k, v) {
                    tbl_row += "<td>"+v+"</td>";
                    })
                    tbl_body += "<tr>"+tbl_row+"</tr>"; 
                    })
                 return tbl_body;
                }
            $('#pieces tbody').html(makeTable('records'));

list.php的

<?php
  $pdo = new PDO('mysql:host=localhost:8888;dbname=searchable-db', 'pim-admin', 'admin'); 
  $select = 'SELECT *'; 
  $from = ' FROM products'; 
  $where = ' WHERE TRUE'; 
  $sql = $select . $from . $where; 
  $statement = $pdo->prepare($sql);
  $statement->execute();
  $results=$statement->fetchAll(PDO::FETCH_ASSOC);
  $json=json_encode($results);
  echo($json);
?>

1 个答案:

答案 0 :(得分:0)

首先改变这个: dataTyoe:&#39; json&#39; - 没有dataTyoe,只有dataType cache:false - 这是默认值,您不需要再次设置

$(function(){


         function updateProducts(){
            $.ajax({
                type: "POST",
                url: "testData.php",
                success: function(records){
                    console.log($.parseJSON(records));
                    makeTable($.parseJSON(records));

                }
            });
        }

        updateProducts();
        function makeTable(data){
            console.log(data);
            //update your html or something else
        }

    });

在你的php文件中记下这个,仅用于测试

<?php


    echo json_encode(array(
        array(
            "id" => 2,
            "title" => "MVC architecture in JS",
            "price" => 89.00,
            "cover" => "mvc.jpg"
        ),
        array(
            "id" => 3,
            "title" => "JavaScript - Good Parts",
            "price" => 99.99,
            "cover" => "good-parts.jpg"
        ),
        array(
            "id" => 4,
            "title" => "JavaScript Design Patterns",
            "price" => 149.50,
            "cover" => "patterns.jpg"
        ),
        array(
            "id" => 5,
            "title" => "3D World with Three.js",
            "price" => 299.00,
            "cover" => "three.jpg"
        )
    ));



   ?>