Javascript ajax表单无法正确提交

也许我只是非常困惑。我对AJAX比较陌生。我在一个页面上有多个表单，我最终会尝试提交这些表单，但目前，我只想提交单击了提交按钮的特定表单。由于范围问题，我将我的选项和绑定带到了我的单个函数中，但我也很乐意在它之外工作。如果试图根据表单与页面上的其他表单共享的表单类来选择表单，但选择其特定id，则不起作用：

$('.teacher_account_form').submit(function(){
var form_submitted = $(this).attr('id');
console.log(form_submitted);

var options = {
    type: 'POST',
    url: "/users/p_teacher_account_work",
    beforeSubmit: function() {
        $('#pay_output').html("Updating...");
    },
    success: function(response) {
        $('#pay_output').html(response);
    }
};

// Using the above options, ajax'ify the form
$(form_submitted).ajaxForm(options);    

});

下面的代码有效，但这意味着我正在硬编码我的表单id以进行绑定：

var options = {
type: 'POST',
url: "/users/p_teacher_account_work",
beforeSubmit: function() {
    $('#pay_output').html("Updating...");
},
success: function(response) {
    $('#pay_output').html(response);
}
};

// Using the above options, ajax'ify the form
$('#pay_form').ajaxForm(options);

说到works，我的意思是我从php文件中得到了成功消息，并将其返回到页面，数据库也随之更新

更新：我使用的是按钮，而不是输入类型=提交

$('.teacher_account_form').submit(function(e){
e.preventDefault();
/* var form_submitted = $(this).attr('id'); omit this line */
$.ajax({
    type: 'POST',
    url: "/users/p_teacher_account_work",
    cache: false,
    async: true,
    beforeSubmit: function() {
        $('#pay_output').html("Updating...");
    },
    success: function(response) {
        $('#pay_output').html(response);
    }
});
});

提交时不使用AJAX，除非您选择eventObject.preventDefault或返回false；。如果将“提交”更改为按钮并单击该按钮而不是“提交”，则如果没有其他错误，页面将正常工作。

如果在表单提交时执行ajax调用，则需要阻止实际表单提交：

$('.teacher_account_form').submit(function(e){
     e.preventDefault();
     //rest of code
}

---

我也有类似的问题，我所做的是：

 1. form action="##"
 2. instead of input type="submit", use type="button"
 3. at input type="button" add onclick attribute to your function instead of using $("#id").blah
 // Call your function like this
 // example: <input type="button" onclick="some_function()" />
 4. Test your code.

这就是我目前正在做的，我没有任何问题。 这将防止表单被分配给它的功能之外的其他功能提交。

---

希望这有帮助。

我需要创建空的js对象。解决方案如下：

var which_button;
$('.account_submit').click(function() {
    which_button = $(this).attr('id');

    // Create empty jQuery objects -
    var $jsOutput = $([]);
    var $jsForm = $([]);

    // url to submit to
    var ajaxURL = "/users/p_teacher_account_work";

    // Assign jQuery selector objects
    switch (which_button) {
        case "work_submit":
            $jsOutput = $('#pay_output');
            $jsForm = $('#pay_form');
            break;
        case "edu_submit":
            $jsOutput = $('#edu_output');
            $jsForm = $('#edu_form');
            break;
        case "image_submit":
            $jsOutput = $('#image_output');
            $jsForm = $('#image_form');
            break;
        case "personal_submit":
            $jsOutput = $('#personal_output');
            $jsForm = $('#personal_form');
            break;
    }

    // Lock and load the ajax request -
    var ajax_options = {
        type: 'post',
        url: ajaxURL,
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $jsOutput.html("Updating...");
        },
        success: function(response) {
            $jsOutput.html(response);
        }
    };
    $jsForm.ajaxForm( ajax_options );


});

---

我们都会犯错误@KevinbowerSox似乎它可能曾经工作过一次，然后得到这样的结果：未捕获类型错误：无法读取未定义的属性“设置”我的代码中不包含单词设置你一定是因为错误地想知道这一行是什么：var form_submitted=$this.attr'id'；仍然是吗？我认为这行可以安全地省略。我实际上使用了一个按钮：明显地更新工作，我的意思是，或者，代替任何类型的class='submit'。您想更具体地说，代码方面吗？不确定你在第三步中的意思，我在第三步之后添加了一个示例来演示。我用它来让我的编码更清晰，它产生的问题更少。