Fatal编程技术网
  • php/
  • 用PHP从数据库中检索数据，并在JQuery中显示在同一页面上

用PHP从数据库中检索数据，并在JQuery中显示在同一页面上

php jquery database

用PHP从数据库中检索数据，并在JQuery中显示在同一页面上,php,jquery,database,Php,Jquery,Database,今天我需要一些关于我工作的帮助。我试图用JQuery显示我从数据库中用PHP检索到的一些数据 由于某些原因，我需要在JQuery中显示数据 我的PHP和我的JQuery在同一个页面上，index.PHP，但我的问题是我的ajax不会显示我的数据，也不会出现错误，所以我不知道我的错误在哪里 这是我的密码： <?php require 'inc/db-connect.php'; $title = array(); try{ $sql = "SEL

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

由于某些原因，我需要在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>


/** 
*我所有的HTML都在这里
**/
$（文档）.ready（函数（）{
$.ajax({
数据：“，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（）{
console.log（'加载数据失败'）；
}
});
});
因此，当我加载页面时，JQuery执行“console.log（'Failed to load data'）”，这意味着有一个错误，但我找不到它

有人能帮我吗

Thnx， 安多

编辑1:

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

我已经在'index.php'上设置了URL参数，但两者都不起作用

编辑2:

经过一些研究，似乎不可能在同一页面上发出PHP请求和ajax请求。因此，我将尝试其他方法…

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

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
任何格式错误的JSON都将被拒绝，并引发解析错误。

将内容的标题设置为JSON类型。。。下面是设置标题类型的示例

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
任何格式错误的JSON都将被拒绝，并抛出一个解析错误。

您当前所做的是：

您正在创建的输出如下所示：

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

{“您的json是”：“这里”}
... html的其余部分
执行ajax请求以获取json
...
现在有很多问题

  • html输出之前有json
  • 有一个ajax调用试图获取刚刚输出的文件， 但是json后面有html，所以它不理解json
要解决这个问题，你可以把它放在两个不同的文件中

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();


/** 
*我所有的HTML都在这里
**/
$（文档）.ready（函数（）{
$.ajax({
url:“getmyjson.php”
数据：“，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（）{
console.log（'加载数据失败'）；
}
});
});
或者您可以将其放在一个文件中，并使用条件将其拆分

<?
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'"
}

您当前正在做的是：

您正在创建的输出如下所示：


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



{“您的json是”：“这里”}
... html的其余部分
执行ajax请求以获取json
...


现在有很多问题


    

  • html输出之前有json
    • 

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


要解决这个问题，你可以把它放在两个不同的文件中

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();




/** 
*我所有的HTML都在这里
**/
$（文档）.ready（函数（）{
$.ajax({
url:“getmyjson.php”
数据：“，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（）{
console.log（'加载数据失败'）；
}
});
});


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


<?
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'"
}



在浏览器中单击鼠标右键，查看脚本生成的源代码。你应该立即发现问题。这很令人困惑。$.ajax没有可获取的url。ajax函数中的url选项在哪里？这是否可以在不传入URL的情况下获取数据？我在这篇文章中读到，如果在同一页面上执行ajax请求，我可以让URL参数为空。我尝试将url参数设置为'index.php'，但这也不起作用：\.@nvanesch-是的，php和JQuery在同一个文件中。在浏览器中单击鼠标右键，查看脚本生成的源代码。你应该立即发现问题。这很令人困惑。$.ajax没有可获取的url。ajax函数中的url选项在哪里？这是否可以在不传入URL的情况下获取数据？我在这篇文章中读到，如果在同一页面上执行ajax请求，我可以让URL参数为空。我尝试将url参数设置为'index.php'，但这也不起作用：\.@nvanesch-Yes，PHP和JQuery在同一个文件中。显然，错误来自我的ajax请求，因为PHP echo显示了我检索的数据。显然，错误来自我的ajax请求，因为PHP echo显示了我检索的数据。谢谢！事实上，使用两个不同的文件就不再有问题了；）。谢谢事实上，使用两个不同的文件就不再有问题了；）。