jquery $.ajax 不工作。表格 post

Question

我想使用 jquery 将表单数据发送到服务器，我关注了这个页面↓

how do i submit a form using get method in jquery。

但不工作，没有任何 window 警报。不知道为什么....

我已经在 head（版本 1.11.3）中导入了 jquery 脚本。

<script src="./static/jquery-1.11.3.js" type="text/javascript"></script>

这是我的脚本。

<script>
    function test(){
            document.getElementById("form_test").submit( function() {
                $.ajax({
                    url     : $(this).attr('action'),
                    type    : $(this).attr('method'),
                    data    : $(this).serialize(),
                    success : function( response ) {
                        alert( response );
                    },
                    error:function(){
                        alert("error");
                    }
                });
                return false;
            });
        }
</script>

这是我的表单代码。

<form id="form_test" class="appnitro"  method="post" action="">
    <div class="form_description">
        <p>test.</p>
    </div>                      
    <ul >
        <li id="li_1" >
            <label class="description" for="info">info</label>
            <div>
                <input id="info" name="info" class="setInfo" type="text" maxlength="16" value=""/>
                <label id="infoMsg" class="Message"></label><br/>
            </div>
        </li>           
        <li class="buttons">
            <button type="button" class="mbutton" onclick="test()">submit</button>
        </li>
    </ul>
</form>

Answer 1

您需要在 dom 就绪处理程序中注册表单提交事件处理程序

$(function () {
    $("#form_test").submit(function () {
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            success: function (response) {
                alert(response);
            },
            error: function () {
                alert("error");
            }
        });
        return false;
    });
})

在您的代码中，您在单击按钮时调用 test 方法，该方法调用带有回调的 form 元素提交函数

Answer 2

从 test()

中删除提交处理程序

document.getElementById("form_test").submit(function () {

这不是必需的，因为当用户单击按钮时会调用函数 test。

function test() {
    var $form = $('#form_test');
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize(),
        success: function (response) {
            alert(response);
        },
        error: function () {
            alert("error");
        }
    });
    return false;
}

我也建议你使用jQuery on()绑定事件

$('#form_test').on('submit', function () {
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function (response) {
            alert(response);
        },
        error: function () {
            alert("error");
        }
    });
    return false;
});

Answer 3

由于您在提交按钮中使用了内联 js，因此不需要提交事件句柄。请参阅下面的代码：

<script>
function test(){
        var myForm =  document.getElementById("form_test");            
            $.ajax({
                url     : $(myForm).attr('action'),
                type    : $(myForm).attr('method'),
                data    : $(myForm).serialize(),
                success : function( response ) {
                    alert( response );
                },
                error:function(){
                    alert("error");
                }
            });
            return false;

    }

jquery $.ajax 不工作。表格 post

jquery $.ajax is not working. form post

javascript

ajax

jquery

bottle

python-2.7