Question

我想用jquery将表单数据发送到服务器，我按照这个页面↓

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

但是没有工作，没有任何窗口警报。我不知道为什么......

我已经在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 ready handler

中注册表单提交事件处理程序

$(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无效。表格

3 个答案: