javascript - jQuery - 加载表单、提交 POST、无需刷新即可检索结果

Question

首先，我对此进行了广泛的研究，但无法成功应用我找到的任何答案，至少以我想要的方式。我想我已经很接近了，但可能还差得很远......

这里提出了类似的问题:Submit form in div with ajax, return php in div without refresh

我基本上使用 4 个 div，第 1 个 div 提供添加、编辑或删除用户的选择。 div 2 是容器中的新行，当您选择“添加”时，加载的文件会在该行内创建 2 列(都是单独的 div)，第一个 (div 3) 带有一个下拉菜单，询问您要添加多少用户。答案被发送到另一个 PHP 文件，该文件使用 FOR 循环创建正确数量的表单，然后将它们加载到 div 4 中(在包含的代码末尾将其标识为“表单”)。

PHP 一切正常，并将初始下拉菜单加载到 div 2 中，但是每次我点击提交时，它都不会执行任何操作并删除整行(其中包括下拉菜单(带有下拉菜单的 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;
?>

我认为这是相对简单的事情，但当这里有如此丰富的资源时，继续努力解决它似乎很荒谬。预先感谢您的帮助!

Answer 1

不确定这是否是问题所在，但是:

您应该删除此行中的最后一个括号:

$("#num").submit(function()({

应该是:

$("#num").submit(function(){