我是网络编程领域的初学者,需要一些指导来帮助我解决问题。我很抱歉,我的基本功在这一点上不是很强。
我有一个名为view.adminsettings.php的主页,我在其中放置了一个导航DIV和一个内容DIV。我在导航DIV中有一个链接,它将名为view.pdus_1.php的第二个php页面的内容加载到view.adminsettings.php的内容DIV中现有列表。我希望用户能够通过POST将这些信息提交到action.pdu_1.php页面,该页面将向数据库输入表单数据。我还希望在view.adminsettings.php页面的内容DIV页面中刷新view.pdu_1.php页面,以便用户可以立即查看他们新创建的项目。
不幸的是,我的问题很多。我想帮助解决以下两个问题:
1) 我在从表单中获取数据以正确POST到action.pdu_1.php页面时遇到问题。现在它同时执行POST(无参数)和GET。我应该在哪一页张贴此代码?view.adminsettings.php还是view.pdu_1.php?
2) 我在刷新内容DIV中的view.pdu_1.php页面时也遇到了问题。它不会将view.pdu_1.php页面重新加载回DIV。
将view.pdu_1.php页面加载到内容div的当前代码(正在工作):
function loadPDUs(){
$(function() {
$('#DisplayDiv').load('/pdus');
return false;
});
};
视图中DIV的HTML剪切集.adminsettings.php:
<div class="container-fluid">
<div class="row">
<div id="nav" class="col-md-2">
<h4>Admin Settings</h4>
<div style="height:20px"></div>
<p><a href="#" onclick="return loadPDUs();"><i class="fa fa-plug"></i> PDUs </a></p>
</div>
<div id="DisplayDiv" class="col-md-10">
<!-- PDU content here -->
</div>
</div>
样本助推器模态形式代码:
<div class="modal fade" id="addpdu">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add PDU</h4>
</div>
<div class="modal-body" id="addpdudiv">
<form class="form-horizontal">
<input type="hidden" name="action" id="pduaddaction" value="add">
<div class="form-group">
<label for="pduname" class="col-sm-2 control-label">Name</label>
<div>
<input type="text" class="form-control" id="pduname" placeholder="PDU Name" name="name">
</div>
<br>
<label for="pduports" class="col-sm-2 control-label">Ports</label>
<div>
<input type="text" class="form-control" id="pduports" placeholder="Number of ports" name="ports">
</div>
<br>
<p class="text-center">
<button id="submitpduadd" class="btn btn-primary">Save</button> <button type="reset" class="btn btn-default">Reset</button>
</p>
</div>
</form>
</div>
</div>
</div>
AJAX 示例
$(function(){
$("button#submitpduadd").click(function(){
$.ajax({
type: "POST",
url: "/actions/action.pdu_1.php",
data: $('form.form-horizontal').serialize(),
success: function(){
console.log("submit successful");
$("#addpdudiv").modal('hide');
$('#DisplayDiv').load('/pdus');
},
error: function(){
alert("failure");
}
});
});
});
示例操作.pdu_1.php代码:
<?php
session_start();
$action = filter_input(INPUT_POST, "action");
if($action === "add") {
$name = filter_input(INPUT_POST, "name");
$ports = filter_input(INPUT_POST, "ports");
$pdu = new pdu();
$pdu->create($name, $ports, $location);
}
?>
我可以提供一些建议。PDU加载的第一个:
<div class="container-fluid">
<div class="row">
<div id="nav" class="col-md-2">
<h4>Admin Settings</h4>
<div style="height:20px"></div>
<p><a href="/pdus" id="loadPDU"><i class="fa fa-plug"></i> PDUs</a></p>
</div>
<div id="DisplayDiv" class="col-md-10">
<!-- PDU content here -->
</div>
</div>
</div>
<script>
$(function(){
$("#loadPDU").click(function(e){
e.preventDefault();
$('#DisplayDiv').load($(this).attr("href"));
});
});
</script>
只要稍微便携一点,如果浏览器不支持或使用JS/JQuery,它就会出现故障。然后,您还可以创建其他链接或按钮来利用相同的代码。
您的AJAX代码总体上很好。一些小的改变可以让它变得更坚固,让你知道它是在某个地方工作还是在消亡。
$(function(){
$("button#submitpduadd").click(function(){
$.ajax({
type: "POST",
url: "/actions/action.pdu_1.php",
data: $('form.form-horizontal').serialize(),
type: 'JSON',
success: function(retData){
if(retData.error.length){
console.log(retData.error);
} else {
console.log(retData);
}
$("#addpdudiv").modal('hide');
$('#DisplayDiv').load('/pdus');
},
error: function(){
alert("HTTP failure. Try Again.");
}
});
});
});
PHP错误的性质几乎总是会返回200状态,所以AJAX在发出HTTP请求时很少会得到400或500状态的响应。你可以强迫它这样做,但这很耗时,而且你无法详细说明它何时失败。这意味着即使PHP遇到错误,success()
也会受到攻击。我们的PHP需要能够告诉我们的JS/JQuery遇到了错误。
<?php
session_start();
$action = filter_input(INPUT_POST, "action");
if($action === "add") {
$name = filter_input(INPUT_POST, "name");
$ports = filter_input(INPUT_POST, "ports");
$location = (isset($_POST['location'])?filter_input(INPUT_POST, "location"):"");
$params = array("name" => $name, "ports" => $ports, "loc" => $location);
try {
$pdu = new pdu();
$pdu->create($name, $ports, $location);
} catch (Exception $e) {
$error = array('error' => 'Caught exception: ' . $e->getMessage());
}
echo (isset($error))?json_encode($error):json_encode($params));
}
?>
所以现在PHP会返回一些东西,即使它们是失败的。我们可以检查这些数据,无论是成功还是失败,并弄清楚发生了什么。即使PHP之前有错误,也应该可以使用FireBug或其他调试工具查看生成的HTML。