在PHP中从数据库中检索数据并在同一页面上的JQuery中显示它们

时间:2013-04-29 12:45:41

标签: php jquery database

今天我需要一些关于我工作的帮助。我试图在JQuery中显示我从我的数据库中检索到的一些数据。

由于某些原因,我需要在JQuery中显示数据......

我的PHP和我的JQuery位于同一页 index.php ,但我的问题是我的ajax不会显示我的数据并且没有出现错误,所以我不确切地知道我的错误在哪里。

这是我的代码:

<?php
    require 'inc/db-connect.php';

    $title = array();

    try{
        $sql   = "SELECT * FROM events";
        $req   = $db->query($sql);  
    }catch(PDOException $e){
        echo 'Erreur: '.$e->getMessage();
    }

    while($res = $req->fetch()){
        array_push($title, $res['title']);
    }

    echo json_encode($title);

    $req->closeCursor();
?>

<!DOCTYPE html>

<html lang="fr">
    <?php include('inc/head.html'); ?>

    <body>
        <div id="stage">

            /** 
            * ALL MY HTML GOES HERE 
            **/

        </div>
        <!-- END STAGE -->

        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                    data: "",
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                    },
                    error: function(){
                        console.log('Failed to load data');   
                    }
                });
            });
        </script>
    </body>
</html>

因此,当我加载页面时,我的JQuery执行“console.log('无法加载数据')”,这意味着有错误,但我找不到它。

有人可以帮我吗?

日Thnx, Antho

编辑1:

我的PHP请求似乎没有问题,因为echo显示我从数据库中检索的数据。显然,错误来自我的ajax请求。

我在'index.php'上设置了URL参数,但两者都没有。

编辑2:

经过一些研究后,似乎无法在同一页面上发出PHP请求和ajax请求。所以我会尝试别的......

2 个答案:

答案 0 :(得分:1)

您目前正在做的是:

您正在创建一个如下所示的输出:

{"your json is": "here"}
<html>
  ... rest of html
  <script> doing an ajax request to get the json </script>
  ...
</html>

现在有很多问题。

  • 在html输出之前有json
  • 有一个ajax调用试图获取刚刚输出的文件, 但是在json之后有html,所以它不理解json

要解决此问题,您可以将其放在2个不同的文件中。

getmyjson.php

<?php
    require 'inc/db-connect.php';

    $title = array();

    try{
        $sql   = "SELECT * FROM events";
        $req   = $db->query($sql);  
    }catch(PDOException $e){
        echo 'Erreur: '.$e->getMessage();
    }

    while($res = $req->fetch()){
        array_push($title, $res['title']);
    }

    header('Content-type: application/json');
    echo json_encode($title);

    $req->closeCursor();
    exit();

的index.php     

<html lang="fr">
    <?php include('inc/head.html'); ?>

    <body>
        <div id="stage">

            /** 
            * ALL MY HTML GOES HERE 
            **/

        </div>
        <!-- END STAGE -->

        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                    url: "getmyjson.php"
                    data: "",
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                    },
                    error: function(){
                        console.log('Failed to load data');   
                    }
                });
            });
        </script>
    </body>
</html>

或者您可以将其放在一个文件中并使用条件将其拆分

<?
if(isset($_GET['getmyjson']))
{
  // output json (incl header)
  exit();
}
else // why an else when you already did an exit.. just to be safe when you or someone else is modifying the code
{
  // output your main page with the ajax script that calls "url: '?getmyjson=true'"
}

答案 1 :(得分:0)

将内容的标题设置为json的类型...以下是设置标题类型的示例。

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

任何格式错误的JSON都会被拒绝,并且会抛出一个解析错误。