Question

我有4个文件testmain.php test1.php test2.php test3.php，在testmain.php中我有一个div类，内容为“content_load”，我在这里一个一个地加载3个文件，它们正在加载正常但test1.php是一个表单文件，当它完成加载我提交它与ajax但它正在重定向，我正在尝试从昨天但不能解决这个，如果我不加载带有ajax的文件，只需提交test1.php这工作正常，但是当我结合使用load（）加载文件的代码并使用$.ajax()提交时，加载文件的代码工作正常，但重定向任何解决此问题对我来说，所以我可以继续我的学习

testmain.php

 <div id="menu_top">
                <a class="menu_top" href="test1.php">TEST 1</a> /
                <a class="menu_top" href="test2.php">TEST 2</a> /
                <a class="menu_top" href="test3.php">TEST 3</a> /
    </div>
        <div class="content_load"></div>

test1.php

 <form class="ajax" action="test1.php" method="post" enctype="multipart/form-data">
        <input type="text" name="txt1" /> <br>
        <input type="text" name="txt2" /> <br>
        <select name="sel">
        <?php
        include  '../mysql_connect.php';
        $db = new DBConfig();
        $conn = $db->getDbPDO();

       $sql = "SELECT * FROM tbl_campus ORDER BY camp_id ASC";
       //$sql = "SELECT camp_id FROM tbl_campus ORDER BY camp_id ASC";

       $query = $conn->query($sql);
       $result = $query->fetchAll(PDO::FETCH_ASSOC);
       $arrlength = count($result);

       for ($x = 0; $x < $arrlength; $x++){
       ?>        
       <option value="<?php echo $result[$x]['camp_id']; ?>"><?php echo $result[$x]['camp_name']; ?>
       <?php } ?>
        </select>
        <br><br>
        <input type="submit" value="Click" name="submit" />
    </form>

test2.php＆amp;测试3.php

  <h3>THIS IS TEST 2</h3>   <h3>THIS IS TEST 2</h3>

jquery文件

$(document).ready(function() {            
$('.content_load').load($('.menu_top:first').attr('href'));
$('.menu_top').click(function(){
    var page = $(this).attr('href');
    $('.content_load').load(page); return false; });

    $('form.ajax').on('submit', function(e){
     e.preventDefault();
        var that = $(this);
url = that.attr('action'), type = that.attr('method'), data = {};
        that.find('[name]').each(function(index, value){            
        var that=$(this),
            name = that.attr('name'),
            value = that.val();
            data[name] = value;
    });
    $.ajax({
       url: url,
       type: type,
       data: data,
       success: function(response){
           console.log(response);
       }
    });
    clearAll();
    return false;
              });
});

function clearAll(){
    $("form :input").each(function(){
       $(this).val(""); 
    });
}

Answer 1

您不能将直接事件处理程序用于尚未加载的元素。只是尝试更改此行：

$('form.ajax').on('submit', function(e){

为：

$('.content_load').on('submit','form.ajax', function(e){

否则javascript不会将该事件绑定到表单并且会发生常规submit。

这里区别的很好解释：Direct vs. Delegated - jQuery .on()

Answer 2

我可能误解了这个问题，但如果你提交网站就会执行表单操作。如果你不想要这个，你需要在提交时添加“return false”，或者提交一个“按钮”而不是“输入”。

php Ajax和jquery表单加载然后提交无法正常工作

2 个答案: