我正在尝试获取一个PHP文件来收集目录信息,然后将其显示在我当前的html页面上。
我想阻止在新页面上打开 php 代码的结果 (PHP_Function.php),而是在完成我的 PHP 代码后将它们发布在我的主 html 页面上的div 上。
我的 html 代码如下:
<form id="myFormName" method="post" action="PHP_Function.php">
<input type="submit" class="learnButton" name="insert" value="Find Available Evidence" />
</form>
<script>
$(function(){
$("#myFormName").submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data)
{
//display data...
//("#results").html(data.name).show;
//console.log(data);
$("#results").append(data.name);
}
});
});
});
</script>
<div id="results"></div>
PHP代码我有一个数组,我希望在我的主html页面(IfPresentArray)上发布,我已经尝试过:
echo json_encode($IfPresentArray);
此外,这段代码确实正确地给了我想要的结果,但我希望将它们写入"结果"div。并且不打开带有结果的新 PHP 页面
我认为要做到这一点,我必须使用 JSON 和 AJAX 将结果发布回页面,但我正在努力做到这一点,非常感谢一些帮助。
第一件事是防止表单发出HTTP请求。
$("#myFormName").submit(function(event) {
event.preventDefault(); // prevent form submission
这比return false;
更好,因为JavaScript中的任何失败都意味着永远不会到达return语句,并且表单将触发HTTP请求。因此,您现在可以删除return false;
。
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json', // this is what you expect back from the php (i.e. json, html, etc)
success: function(data) {
// data will be your json array or object
console.log(data); // will allow you to see return data in web browser inspection tools
$("#results").append(data.name).show(); // show is a function (only needed if you hide the results div to start with).
}
});
然后只需检查其余 JavaScript 上的括号是否匹配。使用具有语法突出显示的程序通常有助于实现这一点。
问题是我缺少括号/语法不正确。具体在代码中:
("#results").append(data);
一开始缺少一个 $。
感谢@diggersworld(和逻辑思维)
修改和完成的代码如下所示:
<form id="myFormName" method="post" action="PHP_Function.php">
<input type="submit" class="learnButton" name="insert" value="Find Available Evidence" />
</form>
<script>
$(function(){
$("#myFormName").submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data)
{
//display data...
//("#results").html(data.name).show;
console.log(data);
$("#results").append(data);
}
});
});
});
</script>
PHP 代码保持不变:
echo json_encode($IfPresentArray);