为什么jquery ajax表单提交返回错误?

时间:2015-06-12 14:32:03

标签: javascript jquery ajax

您好我是ajax和jquery的新手,当需要按钮时,我需要提交带有ajax的表单" mainbutton"点击。这是我的代码

$(document).ready(function(){
            $("#mainbutton").click(function(){
                $("#ajaxform").submit(function(e)
                {
                    var postData = $(this).serializeArray();
                    var formURL = $(this).attr("action");
                    $.ajax(
                    {
                        url : formURL,
                        type: "POST",
                        data : postData,
                        success:function(data, textStatus, jqXHR) 
                        {
                            alert("success");
                        },
                        error: function(jqXHR, textStatus, errorThrown) 
                        {
                            alert("error");      
                        }
                    });
                    e.preventDefault(); //STOP default action
                });
                $("#ajaxform").submit(); //Submit the form
            });
        });

当我尝试我得到错误并且我的表单未提交且我的servlet doPost()未被调用。我的错误在哪里?

1 个答案:

答案 0 :(得分:0)

看起来它对我有用。见小提琴。

https://jsfiddle.net/louisnovick/qyLmvjax/

JS

$(document).ready(function(){
        $("#mainbutton").click(function(){
            $("#ajaxform").submit(function(e)
            {
                var postData = $(this).serializeArray();
                var formURL = $(this).attr("action");
                $.ajax(
                {
                    url : '/echo/html/',
                    type: "POST",
                    data : postData,
                    success:function(data, textStatus, jqXHR) 
                    {
                        alert("success");
                    },
                    error: function(jqXHR, textStatus, errorThrown) 
                    {
                        alert("error");      
                    }
                });
                e.preventDefault(); //STOP default action
            });
            $("#ajaxform").submit(); //Submit the form
        });
    });

HTML

<form method="POST" id="ajaxform">
    <label for="test">Test Input</label>
    <input type='text' name="test">
        <button type="submit" id="mainbutton">Submit</button>
   </form>