Question

我正在尝试使用通用表单提交功能。出于某种原因，jQuery根本没有捕获表单提交操作。我使用以下内容：

$('form').submit(function( event ) {
    alert("Form submit through ajax");
    event.preventDefault();
});

我从来没有得到警报，表单用于正常的帖子提交，因为后端是一个专门处理ajax请求的基于python django类的视图，所以总是会失败。我是jQuery的新手。

$(document).ready(function(){
    $.ajaxSetup(
        {type:'POST'});
    $('.nav_menu').click(function(){
        var hostname = window.location.origin;
        alert("hostname = " + hostname + $(this).attr("id"));
        $.ajax({
            type: 'GET',
            url: hostname + $(this).attr("id"),
            data: {},
            success: function(data){
                            var page = data['page'];
                            $('#view_area').empty();
                            $('#view_area').append(page);
                    }
        });
    });

    /*$('form').submit(function(){
            alert("Form submit in ajax");
            //$(this).ajaxSubmit();
            return false;
    });*/
    $('form').submit(function( event ) {
        event.preventDefault(); // <-- important
        alert("Form submit through ajax");

        /*$(this).ajaxSubmit({
                target: '#output'
        });*/
    });
    $(':submit').click(function(){
        alert(":submit = Form submit through AJax");
    });
});

这是完整的jQuery文件。以下是表格所在的html。

<table>
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
            <th>D.O.B</th>
            <th>Marital Status</th>
            <th>Mobile</th>
            <th>Alt Mobile</th>
            <th>Alt Contact</th>
            <th>Office Number</th>
            <th>Primary Address</th>
            <th>Permanent Address</th>
            <th>Secondary Address</th>
        </tr>
    </thead>
    <tbody>
        {% for e in entry_all %}
            <tr><th><form action="" method="post">{% csrf_token %}
                        <label for="id_emp_id"></label> <input id="id_emp_id" maxlength="50" name="emp_id" type="hidden" value="{{ e.emp_id }}" />
                        <input type="submit" value="Remove">
                    </form>
                </th>
                <th>{{ e.emp_id }}</th>
                <td>{{ e.name }}</td>
                <td>{{ e.dob }}</td>
                <td>{{ e.marital_stat }}</td>
                <td>{{ e.cell_no }}</td>
                <td>{{ e.cell2_no }}</td>
                <td>{{ e.alt_no }}</td>
                <td>{{ e.off_ll }}</td>
                <td>{{ e.prim_addr }}</td>
                <td>{{ e.perm_addr }}</td>
                <td>{{ e.sec_addr }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<hr/>

Answer 1

我最初使用cdn来加载jquery。出于某种原因，这对我来说并不是一直有效。所以我决定静静地服务它。奇怪的是，cdn链接对我的队友系统没有任何问题。没有代码更改。

Answer 2

EDITED

以下代码应按预期工作。

在jQuery中，有一个preventDefault方法，你可以调用它来阻止事件的默认操作。对于表单，默认操作是＆＃34; GET＆＃34;或＆＃34; POST＆＃34;表格的动作参数中提供的脚本或页面的数据。

如果您想阻止表单的默认操作（阻止它提交并跟踪操作URL），您需要首先在处理程序代码中的某处调用preventDefault 。

以下是一个例子：

$("#myform").on("submit", function(e) {
    e.preventDefault();
    alert("Now I can run...");
    // do AJAX call
    $.ajax({
        type : "POST",
        url : "your-script.py",
        data : { foo : "bar" }
    })
    .done(function(results) {
        // done with post
        // parse data returned from Python
        // available in results parameter
    });
});

如果您的处理程序根本没有运行，您可能无法正确引用您的表单。

jQuery表单选择器似乎不起作用

2 个答案: