javascript - jQuery - 在父页面的 DIV 中加载表单提交(？)

Question

我有以下代码，到目前为止，它工作得很好。但接下来我想加载一个表单……阅读下面这段代码以获得解释。

主页:

<li><a href="content1.php" class="load-external" data-target="#right_section">Some Content</a></li>
<div id="right_section"></div>

<script>
$('body').on('click', 'a.load-external', function(e){
var target = $( $(this).attr('data-target') );
target.load( $(this).attr('href') );
e.preventDefault();
});
</script>

content1.php

<li><a href="content2.php" class="load-external" data-target="#right_section">Some Content 2</a></li>

现在，在 content1.php 中，所有链接 (a=href...) 工作正常并加载到 #right_section div 中。

但是在 content1.php 上，我也有一些表单，我希望它们也加载到同一个 div #right_section 中。表单示例如下:

content1.php 中的示例表单:

<form action="report_output.php" method="get" id="graphIt">

我怎样才能让一个表单(任何表单，可能在页面上有多个)加载到 div #right_section 中，而不加载整个页面(它现在这样做)

谢谢!

Answer 1

您需要替换表单的提交处理程序，类似于替换链接上的普通点击处理程序的方式。

HTML:

<form action="report_output.php" class="load-external" method="get" id="graphIt" data-target="#right_section">

JS:

$('body').on('submit', 'form.load-external', function(e) {
    e.preventDefault();
    var target = $($(this).data('target'));
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        dataType: 'html',
        success: function(response) {
            target.html(response);
        }
    });
});