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

Question

Hi I am new to ajax and jquery and I need to submit a form with ajax when a button "mainbutton" is clicked. Here is my code

$(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
            });
        });

when I try that I get Error and my form is not submitted and my servlet doPost() is not called. Where is my mistake ?

Answer 1

Looks like it's working to me. See Fiddle.

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>