[英]POST / GET compared to submitting form to action page and loading result
[英]jQuery - loading form(s), submitting POST, retrieving result without refresh
首先,我已經對此進行了廣泛的研究,並且無法成功應用我找到的任何答案,至少以我想要的方式。 我想我快要走了,但我可能要離開...
在這里提出了類似的問題: 使用ajax在div中提交表單,在不刷新的情況下在div中返回php
我實質上是在使用4個div,而div 1則提供了添加,編輯或刪除用戶的選擇。 div 2是容器中的新行,選擇“添加”時,加載的文件在該行內創建2列(兩個div),第一列(div 3)帶有下拉菜單,詢問您要添加多少個用戶。 答案將發送到另一個PHP文件,該文件使用FOR循環創建正確數量的表單,然后應將其加載到div 4中(在隨附的代碼末尾將其標識為“ forms”)。
PHP一切正常,並且將初始下拉列表加載到div 2中也可以正常工作,但是每次我單擊Submit時,它都不會執行任何操作,並且會擦除整行(包括該下拉列表(帶有下拉列表的div 3,以及表格的div 4)如果我將“ num”表格上的操作更改為實際的php文件,則會將表格加載到新頁面上,而不是目標div中……我認為這是相關代碼。
controls.php
<?php
require_once 'header.php';
if ($loggedin == true && ($user->roles == 1 || $user->roles == 2)) {
echo <<<_END
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src='https://code.jquery.com/jquery.js'></script>
<script src='js/bootstrap.min.js'></script>
<script>
$(document).ready(function(){
$('#addUsr').click(function(){
$('#controls').load('add.php', function(){
});
});
$('#editUsr').click(function(){
$('#controls').load('edit.php', function(){
});
});
$('#updateUsr').click(function(){
$('#controls').load('update.php', function(){
});
});
});
</script>
<hr class='small-divider'></hr>
<div class='row'>
<div class='col-md-8'>
<h2>Welcome to the User Control Panel</h2>
<p>To use this feature, please choose from the options to the right, and the appropriate form will appear below.</p>
</div>
<div class='col-md-4' id='ctrlwho'>
<h4>What do you want to do?</h4>
<p><button class='btn btn-md btn-primary' id='addUsr' type='button'>Add new</button></p>
<p><button class='btn btn-md btn-primary' id='editUsr' type='button'>Edit current</button></p>
<p><button class='btn btn-md btn-primary' id='updateUser' type='button'>Update Oficers and Committee Heads</button></p>
</div>
</div>
<div class='row' id='controls'>
</div>
</div>
_END;
}
?>
add.php
<?php
echo <<<_END
<script>
$("#num").submit(function(){
$.ajax({
url: 'add.forms.php',
type: 'POST',
data: $("#num").serialize(),
success: function(data) {
$("#forms").empty();
$("#forms").append(data);
}
});
return false;
});
</script>
<div class='col-md-3' id='numForm'> // ineloquently called div-3 in my post
<p>How many users do you want to add?</p>
<p><form name='num' id='num' method='POST' action=''>
<select name='number' size='1' id='select-1'>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=30>30</option>
<option value=50>50</option>
</select>
<input type='submit' value='This Many' />
</form>
</div>
<div class='col-md-9' id='forms'> </div> // ineloquently called div-4 above
_END;
?>
我想這是相對簡單的事情,但是當這里有這么多可用資源時,繼續努力似乎很荒謬。 在此先感謝您的幫助!
不知道這是否是問題,但是:
您應該刪除此行的最后一個括號:
$("#num").submit(function()({
應該只是:
$("#num").submit(function(){
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.