Question

我在阻止jquery的ajax调用提交form data twice方面遇到了一些麻烦。

表单有两个字段：

<form id="calendarform_id" method="post" onsubmit="find_schedule()" action="/find_data">
    <input id="date1" type="text" required="" name="d_date1">
    <input id="date2" type="text" required="" name="d_date2">
</form>

进行ajax调用的javascript是：

function get_form_data_uid($form){
    var form_data_array = $form.serializeArray();
    var form_array = {};

    $.map(form_data_array, function(n, i){
        form_array[n['name']] = n['value'];
    });

    form_array['uid'] = localStorage.getItem('uid');

    return form_array;
}

function find_schedule()
{

    var uri, method, formId, $form, form_data;

    uri = location.protocol + '//' + location.host + "/find_schedule";
    method = "POST";
    formId = "#calendarform_id";

    $form = $(formId);
    form_data = get_form_data_uid($form);

    // Set-up ajax call
    var request = {
        url: uri,
        type: method,
        contentType: "application/json",
        accepts: "application/json",
        async: false,
        cache: false,
        dataType: 'json',
        data:  form_data
    };

    $(formId).submit(function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        // Make the request
        $.ajax(request).done(function(data) { // Handle the response
            alert(data.message);
        }).fail(function(jqXHR) { // Handle failure
                console.log("ajax error upon looking up schedule " + jqXHR.status);
            }
        );
        return false;
    });
}

查看对服务器的请求，我发现没有uid字段。我还尝试在提交处理程序中放置检索表单数据和用户标识（uid）以及请求变量的代码，但是仍未提交uid。

为什么？

修改

我已从表单中删除了onsubmit字段，并将提交处理程序移到了函数外部：

更新了javacript代码：

$("#calendarform_id").submit(function(e){
        var uri, method, formId, $form, form_data;

        uri = location.protocol + '//' + location.host + "/find_schedule";
        method = "POST";
        formId = "#calendarform_id";

        $form = $(formId);
        form_data = get_form_data_uid($form);

        // Set-up ajax call
        var request = {
            url: uri,
            type: method,
            contentType: "application/json",
            accepts: "application/json",
            async: false,
            cache: false,
            dataType: 'json',
            data:  form_data
        };
        // Prevent implicit submit
        e.preventDefault();
        e.stopImmediatePropagation();
        // Make the request
        $.ajax(request).done(function(data) { // Handle the response
            alert(data.message);
        }).fail(function(jqXHR) { // Handle failure
                console.log("ajax error upon looking up schedule " + jqXHR.status);
            }
        );
        return false;
    });

编辑＃1：

我已将uid作为隐藏字段添加到表单中：

<form id="calendarform_id" method="post" action="/find_data">
        <input id="date1" type="text" required="" name="d_date1">
        <input id="date2" type="text" required="" name="d_date2">
        <input id="user_id" type="hidden" name="uid" value="<token_from_local_storage>">
</form>

出于某种原因显然我无法调试.submit处理程序中的代码;也没有显示简单的警报。

防止jQuery AJAX调用两次发送表单数据

0 个答案: