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