如何使用Jquery Ajax调用提交表单时更改表单操作

时间:2015-01-09 11:58:00

标签: javascript jquery ajax action persist

我正在尝试对行执行更新和删除操作。我正在使用Jquery Ajax函数。我已经分别编写了两个Jquery函数来执行操作。两个函数都有不同的操作(URL),但是当我尝试在执行updateRow()之后调用deleteRow()或反之亦然时,操作(URL)值将保留用于第一个函数调用。这是我的代码 -

function updateRow() {
$("#my_form").submit(function(e)
{
    var postData = $(this).serializeArray();
    $.ajax({
        url: "/update?",
        type: "POST",
        data: postData,
        cache: false,
        success: function(data, textStatus, jqXHR) {
            alert("SUCCESS");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("ERROR");
        }
    });
    e.preventDefault();
    e.unbind();
});
$("#my_form").submit();
}


function deleteRow() {
$("#my_form").submit(function(e)
{
    var postData = $(this).serializeArray();
    $.ajax({
        url: "/delete?",
        type: "POST",
        data: postData,
        cache: false,
        success: function(data, textStatus, jqXHR) {
            alert("SUCCESS");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("ERROR");
        }
    });
    e.preventDefault();
    e.unbind();
});
$("#my_form").submit();
}

1 个答案:

答案 0 :(得分:0)

如果要调用不同的更新函数并删除行,则不应绑定提交,请尝试使用

function updateRow() {
    var postData = $('#my_form').serializeArray();
    $.ajax({
        url: "/update?",
        type: "POST",
        data: postData,
        cache: false,
        success: function(data, textStatus, jqXHR) {
            deleteRow(); // call delete after update function callback
            alert("SUCCESS");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("ERROR");
        }
    });       
    return false;// use return false, to prevent page load
}

function deleteRow() {
    var postData = $('#my_form').serializeArray();
    $.ajax({
        url: "/delete?",
        type: "POST",
        data: postData,
        cache: false,
        success: function(data, textStatus, jqXHR) {
            alert("SUCCESS");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("ERROR");
        }
    });
    return false;
}

假设您使用2个元素来调用上述2个函数。