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);
        }
    });
});