[英]POSTing modal form data with AJAX to php
我是Web編程領域的初學者,需要一些指導來幫助我解決問題。 我很抱歉,目前我的基本面還不是很強。
我有一個名為view.adminsettings.php的主頁,其中放置了導航DIV和內容DIV。 我在導航DIV中有一個鏈接,該鏈接將名為view.pdus_1.php的第二個PHP頁面的內容加載到view.adminsettings.php的內容DIV中。 在此view.pdu_1.php上,我有一個引導模式彈出窗口,其中包含一個表單,如果用戶要在現有列表中創建另一個“ PDU”,則該表單應提交。 我希望用戶能夠通過POST將此信息提交到action.pdu_1.php頁面,該頁面會將表單數據輸入數據庫。 我還希望view.pdu_1.php頁面在view.adminsettings.php頁面的內容DIV頁面中刷新,以便用戶可以立即查看其新創建的項目。
不幸的是,我的問題很多。 我想幫助解決以下兩個問題:
1)我無法將數據從表單正確地發布到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;
});
};
view.adminsettings.php中用於DIV的HTML片段網絡:
<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>
樣品boostrap模態形式代碼:
<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");
}
});
});
});
示例Action.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狀態,因此在發出HTTP請求時AJAX很少會收到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。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.