Jquery ajax调用在firefox中无法执行

jquery ajax call not executing in firefox

本文关键字：执行 firefox ajax 调用 Jquery 更新时间：2023-09-26

这个问题是这个问题和这个问题的后续问题。我无法通过jquery的ajax api发送表单字段值。代码如下:

index . html

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="index.css">
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
    <body onload="welcome()">
        <div class id="main"></div>
    </body>
</html>

欢迎函数在index.js中实现:

index.js

function welcome()
{
    view_account();
}
function get_form_data_with_token($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};
    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });
    indexed_array['token'] = 'adafdafdgfdag';
    return indexed_array;
}
$(document).ready(function(){
    $("#changepassword_form_id").submit(function(e){
            var uri, method, formId, $form, form_data;
            // Prevent default jquery submit
            e.preventDefault();
            e.stopImmediatePropagation();
            uri = location.protocol + '//' + location.host + "/change_password";
            method = "POST";
            formId = "#changepassword_form_id";
            $form = $(formId);
            form_data = get_form_data_with_token($form);
            alert("form_data: token = " + form_data['token'] + " password3 = " + form_data['l_password3'] + " password4 = " + form_data['l_password4']);
            // Set-up ajax call
            var request = {
                url: uri,
                type: method,
                contentType: "application/json",
                accepts: "application/json",
                cache: false,
                // Setting async to false to give enough time to initialize the local storage with the "token" key
                async: false,
                dataType: "json",
                data: form_data
            };
            // Make the request
            $.ajax(request).done(function(data) { // Handle the response
                // Attributes are retrieved as object.attribute_name
                console.log("Data from change password from server: " + data);
                alert(data.message);
            }).fail(function(jqXHR, textStatus, errorThrown) { // Handle failure
                        console.log(JSON.stringify(jqXHR));
                        console.log("AJAX error on changing password: " + textStatus + ' : ' + errorThrown);
                    }
            );
    });
});
function view_account()
{
    var changePassword;
    changePassword = "<form action='"/change_password'" id='"changepassword_form_id'" method='"post'">";
    changePassword = changePassword + "<br><label>Old Password: </label><input id='"password3'" type='"password'" name='"l_password3'" required><br>";
    changePassword = changePassword + "<br><label>New Password: </label><input id='"password4'" type='"password'" name='"l_password4'" required><br><br>";
    changePassword = changePassword + "<input type='"submit'" value='"Change Password'">";
    changePassword = changePassword + "</form>";
    // Replace the original html
    document.getElementById("main").innerHTML = changePassword;
}

onsubmit处理程序不会被执行，即使dom ready事件在这个问题中被使用。

我怎么能提交字段只有一次使用ajax api从jquery?

编辑:

jsplay前一个问题的例子。尽管代码在jsfiddle上运行，但在firefox中运行时却失败了。

像这样使用on事件处理程序:

$(document).on("submit","#changepassword_form_id",function(e){
   ...code here...
});

这个委托，因为#changepassword_form_id还没有在document.ready上定义。

既然，您正在使用required属性的输入和需要检查填写的表单，您可以使用submit事件。

你显然是在div加载之前添加了html dom .

这是流的一步一步分解…

您正在加载<head>中的.js文件。
您正在调用文件内部的函数，该函数具有以下行，document.getElementById("main").innerHTML = changePassword; 但是，但是没有id为"main"的东西!!
然后<body>正在加载，其中包含id为"main"的div。

你明白其中的逻辑吗?对吧? ?

不是多管闲事，但这个问题是你的代码设计错误的结果，用任何解决方法来修复它只会让你更加头疼，所以我强烈建议你更新代码设计，除非你对代码几乎没有控制，在这种情况下，补丁工作是你唯一的选择。

如果你是通过拼凑，你总是可以使用.off.on事件委托，它消除了代码重新运行时事件重复的可能性。