Javascript 使用Jquery Ajax POST加载PHP响应
我有一个php脚本,它在数据库查询的结果上循环并打印出来。我试图用AJAX将它们加载到管理界面面板中,但没有用。我的工作主要要求我编写后端代码,所以我还没有花时间学习太多JS/Jquery。无论如何,我有一个“insert.php”页面,它有一个我想点击的按钮,让它调用“posts.php”页面的结果。这是我的档案 insert.php 这是将脚本加载到页面中的文件Javascript 使用Jquery Ajax POST加载PHP响应,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我有一个php脚本,它在数据库查询的结果上循环并打印出来。我试图用AJAX将它们加载到管理界面面板中,但没有用。我的工作主要要求我编写后端代码,所以我还没有花时间学习太多JS/Jquery。无论如何,我有一个“insert.php”页面,它有一个我想点击的按钮,让它调用“posts.php”页面的结果。这是我的档案 insert.php 这是将脚本加载到页面中的文件 $(document.foundation(); 当我单击#ajaxbtn按钮时,它会消失,因此我知道正在调用JS到oncli
$(document.foundation();
当我单击#ajaxbtn按钮时,它会消失,因此我知道正在调用JS到onclick元素,但它不会发布posts.php的结果。我想这可能是我对Ajax工作原理的误解;请告诉我我做错了什么。试着改变一下
$("posts").html(res)
到
另外,我在posts.php中看到您的代码中有一些错误
您没有在字符串中正确嵌入php变量。我认为您需要使用委托事件。将代码更改为: $('ajaxbtn')。在('click',函数(e)上 致: $('ajaxbtn')。在('click','a',函数(e)上
这样,即使父元素的内容发生更改,事件处理程序也会按预期启动。我也遇到了同样的问题,这就解决了。祝你好运。打开浏览器的开发工具,查看AJAX请求/响应。答案很可能就在那里。首先,只发布与问题相关的代码,然后使用较大的ajax的结构你会遇到更小的问题更大的ajax结构?!?我在开发工具中得到了正确的响应,但我不知道为什么它没有出现在DOM中。我剪掉了我的insert.php,但我相信其余的代码是相关的。我也先尝试了更大的ajax结构,但没有用,这就是为什么我要尝试post.将选择器固定到正确的id选择器
$(“#posts”)时会发生什么
?通过登录控制台或使用Alerts,也很容易检查成功回调是否触发。我知道这一点。当我进入生产环境时,它们会得到修复,但这可能是我的AJAX响应失败的原因吗?总是简单的事情让我明白。啊,谢谢,这就是答案。我确实将id选择器修复为这是正确的,但那是在我尝试$.ajax()时,我一定破坏了其他东西。在恢复到上面发布的代码后,这起作用了。谢谢。
<?php
require_once 'connect.php';
$user = 'admin';
$sql = "SELECT * FROM posts WHERE author = ?";
$stmt = $db->prepare($sql);
$stmt->bindParam(1, $user);
$stmt->execute();
$data = $stmt->fetchAll();
foreach ($data as $row)
{
$id = $row['id'];
$title = $row['title'];
$author = $row['author'];
$date = $row['date'];
$smalltext = $row['smalltext'];
$bodytext = $row['bodytext'];
$images = $row['images'];
$imagelist = split(' ', $images);
$shorttext = str_replace(
array("\r\n", "\n"),
array("</p><p>", "</p><p>"),
$smalltext);
echo
"
<div class='row main'>
<h1 class='padding-top-12 bottom-rule-green'>$title</h1>
<div class='small-2 columns'>
<p class='text-justify small-text'>
Post MetaData goes here
</p>
</div>
<div class='small-10 columns bottom-rule-red text-justify'>
<p>
$shorttext
";
foreach ($imagelist as $key => $value)
{
echo "<img src='users/$author/img/$value'>";
}
echo
"
</p>
</div>
</div>
<div class='row main small-text padding-top-1'>
<div class='small-2 small-oofset-2 columns'>
<a href='posts/$author/$id'>Edit Post</a>
</div>
<div class='small-4 columns'>
Timestamp: $date
</div>
<div class='small-4 columns'>
Author: <a href='users/$user'>$user</a>
</div>
</div>
";
}
?>
$.ajaxSetup ({
cache: false
});
var loadUrl = "../../includes/posts.php";
$(function(){
$('#ajaxbtn').on('click', function(e){
e.preventDefault();
$('#ajaxbtn').fadeOut(300);
$.post(loadUrl, {language: "php", version: 5},
function(res){
$("posts").html(res)
}, "html");
});
});
<!--Foundation Framework Necessities-->
<script type="text/javascript" src="../../assets/js/vendor/jquery.js"></script>
<script type="text/javascript" src="../../assets/js/foundation/foundation.min.js"></script>
<script type="text/javascript" src="../../assets/js/postAjax.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
$("posts").html(res)
$("#posts").html(res)