Ajax在表单提交时将新加载到div中时出错

Question

我使用以下代码提交表单，然后使用ajax将操作页面加载到同一页面上的div中，但我在点击提交时再次获得相同表单的副本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
        $(document).ready(function() {
            $('#form1').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('GET'), // GET or POST
        url: $(this).attr('mP.php'), // the file to call
        success: function(response) { // on success..
            $('#res').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
});
        </script>

我的表单代码是

<form method="GET" action="mP.php" id="form1">
<input type="text" id="identity">
<input type="submit" id="sub1" value="Submit">
</form>

点击提交的结果截图 。

Answer 1

可能是页面回发导致此问题。将您的按钮类型更改为按钮，从您的html提交，如下所示：

<input type="button" id="sub1" value="Submit">

并在js

上收听按钮的点击事件

 $(document).ready(function() {
                $('#sub1').click(function() { // catch the form's submit event
        $.ajax({ // create an AJAX call...
            data: $("#form1").serialize(), // get the form data
            type: $("#form1").attr('method'), // GET or POST
            url: $("#form1").attr('action'), // the file to call
            success: function(response) { // on success..
                $('#res').html(response); // update the DIV
            }
        });
        return false; // cancel original event to prevent form submitting
    });
    });

Answer 2

问题是url：$（“＃form1”）。attr（'action'）导致错误。 Thnx 4帮助