使用 jQuery 的 $.ajax( ) 函数从 php 文件中获取 JSON 数据不起作用
Posted
技术标签:
【中文标题】使用 jQuery 的 $.ajax( ) 函数从 php 文件中获取 JSON 数据不起作用【英文标题】:Fetching JSON data from a php file with jQuery's $.ajax( ) function does not work 【发布时间】:2014-03-11 19:31:19 【问题描述】:我试图了解 .ajax() 函数与 jQuery 的魔力。我很难得到我想做的事情。我基本上想要一个内容每 x 次(大约每 10 秒)刷新一次的 div。主要是,这将输出已发布到我数据库中表的最新帖子。我几乎是在使用这个例子来了解如何实现我的目标,但不幸的是我没有得到我想要的。
我正在尝试设置我的文件,以便在单击刷新按钮时,div 会刷新并显示最新的帖子。
一方面我们有 index.php 文件:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Test page</title>
</head>
<body>
<h1>Welcome to the form</h1>
<h2>We are going to try to process this with AJAX</h2>
<h3>I hope it works!</h3>
<div id="content"></div>
<button id="refresh>Refresh!</button>
<script type="text/javascript">
$('#refresh').on('click', function()
$.ajax(
type: "POST",
url: "process.php",
data: ,
error: function(data)
$('#content').text('Update unsuccessful!').
slideDown('slow');
console.log(data);
,
success: function(data)
$('#content').text('Update completed!');
console.log(data);
//somewhere over here use the $.getJSON() function
,
complete: function(data)
setTimeout(function()
$('#content').slideUp('slow');
, 3000);
);
);
</script>
</body>
</html>
另一方面,我们有从数据库查询结果的 process.php 文件:
$dbhost = "localhost";
$dbname = "test";
$dbuser = "root";
$dbpass = "root";
$db = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);
$sth = $db->query("SELECT * FROM posts");
$sth->setFetchMode(PDO::FETCH_ASSOC);
echo json_encode($sth);
你知道如何完成这个吗?
为了构建我的结果,我想在我的 jQuery 代码的成功部分中使用类似这样的东西:
$('#outputdiv').html(
//html code here fetching the JSON data to appear within custom divs (so I can apply css styles to them)
);
另外,您知道如何使 div 自动化,以每次使用相同的 &.ajax() 函数带来新结果吗?我已经通读了文档并遵循了许多示例,但我仍然无法得到我想要的!
提前致谢!
干杯!
编辑: -修复了echo json_encode,“process.php”,擦除了data:行,把传递的(数据)放到了success:error:和complete:area里面还是不行
【问题讨论】:
你没有在成功函数中传递任何数据,php添加这个 echo json_encode($sth); 你在使用表单标签发布价值吗?... 【参考方案1】:第一个 url 应该是字符串类型,所以它看起来像这样
url: "process.php",
然后在process.php
文件中像这样回显你的结果
echo json_encode($sth);
在你的错误中,成功函数会添加这样的参数
error: function(data)
//your code
,
success: function(data)
//your code
根据您的代码,您的变量 form_data
也不需要。所以删除这一行
data: form_data,
【讨论】:
【参考方案2】:您的成功函数必须采用数据参数。
我建议您阅读有关此案例的 $.getJSON 快捷方式。
【讨论】:
【参考方案3】:三件事...
url: process.php
应该是url: "process.php"
form_data
在任何地方都没有真正定义
success: function()
应该是success: function (data)
【讨论】:
【参考方案4】:我认为您需要在 setFetchMode 之后进行 PDO 提取。此外,最好在 Ajax 请求中使用发送 JSON 响应标头
$data = array();
while ($row = $sth->fetch())
$data[] = $row;
header('Content-type: application/json');
echo json_encode($data);
【讨论】:
以上是关于使用 jQuery 的 $.ajax( ) 函数从 php 文件中获取 JSON 数据不起作用的主要内容,如果未能解决你的问题,请参考以下文章