Question

所以我有一个使用 .load 方法通过 AJAX 加载的 PHP 页面。

这随后会显示在我的页面上，但是我需要能够提交位于我使用 .load 加载的第二页上的表单，提交此表单并在同一页面上处理数据而无需重新加载。

我对 javascript 和 AJAX 非常陌生，所以我不知道我晚上是否使用 .load() 正确执行此操作

任何帮助将不胜感激。

第 1 页如下：

        
 <button onclick="Test()" type="button">Load Content</button>
 
 
 <div class="box" id="box" name="box">
        </div>
    
    
    
        <script>
function Test(id) {     
$( "#box" ).load( "test.php?id=" + id );
}
</script>

第二个页面 test.php 包含以下内容


     <form id="enrolemployee" action="" method="post">
     
     
         <div class="form-group">
    <label>Test</label>
    <input type="text" class="form-control" id="Test" name="Test" placeholder="Test">
  </div>
  
  
    
         <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
          <button  type="submit" class="btn btn-outline-custom">Submit</button>
        
        
     </form>

现在要在 test.php 上提交表单，我使用自定义令牌类为每次提交的表单生成一个随机散列，以便我可以验证同一页面上的数据并通过我的数据库进行处理。

这可以吗？还是我需要有我的表格然后通过不同的页面发布数据？

基本上我需要将整个内容留在第 1 页上，像往常一样处理表单，而人员页面不会重新加载并且在第 1 页上始终是静态的，这不应该重定向到 test.php

谢谢。

Answer 1

你可以这样做

index.php

<button onclick="Test('10')" type="button">Load Content</button>
<div class="box" id="box" name="box">
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
    function Test(id) {
        $("#box").load("test.php?id=" + id);
    }

</script>

test.php

<form id="enrolemployee" action="" method="post">
    <div class="form-group">
        <label>Test</label>
        <input type="text" class="form-control" id="Test" name="Test" placeholder="Test">
    </div>
    <input type="hidden" name="token" value="">
    <button type="submit" class="btn btn-outline-custom">Submit</button>
</form>
<script>
    $("#enrolemployee").on('click', e => {
        // Avoid reloading page
        e.preventDefault();
        console.log(<?php echo $_GET['id']; ?>);
    })

</script>

如果页面是通过 ajax 加载的，则在同一加载页面上提交表单

1 个答案: