[英]Loading PHP Response with Jquery Ajax POST
I have a php script that loops over the results of a database query and prints them out. 我有一个php脚本,可以遍历数据库查询的结果并将其打印出来。 I am trying to load them into an Admin Interface Panel with AJAX, but to no avail. 我正在尝试使用AJAX将它们加载到管理界面面板中,但无济于事。 My job requires me to write mostly backend code, so I haven't gotten around to learning much JS/Jquery. 我的工作要求我主要编写后端代码,因此我还没有去学习很多JS / Jquery。 Anyways, I have a page "insert.php" that has a button I want to click and have it call the results from the "posts.php" page. 无论如何,我有一个页面“ insert.php”,该页面上有一个我想单击的按钮,并让它调用“ posts.php”页面中的结果。 Here are my files 这是我的档案
<a href="#" class="button expand" id="ajaxbtn">Load Posts</a>
</div>
</div>
<div class="row main">
<div class="small-8 columns" id="posts">
</div>
</div>
</div>
<?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>
When I click the #ajaxbtn button, it fades out so I know the JS is being called to that element onclick, but it doesn't post the results of posts.php. 当我单击#ajaxbtn按钮时,它会淡出,因此我知道JS正在对该元素onclick调用JS,但是它不会发布posts.php的结果。 I think this may just be my misunderstanding of how Ajax works; 我认为这可能只是我对Ajax的工作方式的误解; if you would please tell me what I did wrong. 请告诉我我做错了什么。
Try changing, 尝试改变,
$("posts").html(res)
to 至
$("#posts").html(res)
Also I see some mistakes in your code in posts.php You are not embedding php variables in strings properly. 另外,我在posts.php中的代码中看到一些错误,您没有将php变量正确地嵌入字符串中。
I believe you need to use a delegated event. 我相信您需要使用委托事件。 Change your code from: 从以下位置更改代码:
$('#ajaxbtn').on('click', function(e) $('#ajaxbtn')。on('click',function(e)
to: 至:
$('#ajaxbtn').on('click', 'a', function(e) $('#ajaxbtn')。on('click','a',function(e)
This way event handlers will fire as expected even if the contents of that parent element change. 这样,即使该父元素的内容发生更改,事件处理程序也会按预期触发。 I had the same issue and this solved it. 我有同样的问题,这解决了它。 Good luck. 祝好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.