jquery ajax调用不在firefox中执行

这个问题是关于this问题和this之一的后续问题之一。我无法通过jQuery的ajax API发送表单字段值。代码如下：jquery ajax调用不在firefox中执行

的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就绪事件，如中所述问题。

如何使用jquery的ajax api仅提交一次字段？

编辑：从以前的问题

jsfiddle例子。即使代码在jsfiddle上运行，但在火狐中运行时也会失败。

来源

2015-10-14 Sebi

你可以附上一个jsfiddle吗？ –

它来自以前只有输入字段https://jsfiddle.net/8g0rvgnt/7/的问题。它适用于jsfiddle，但不适用于Firefox。 – Sebi

为什么要创建一个用JavaScript更改密码的表单，如果它每次都显示？只要把它放在标记和完成。 – Andreas

使用on事件处理程序是这样的：

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

这代表它，因为#changepassword_form_id还未在document.ready定义。

由于您正在使用required属性对输入信息进行检查并需要检查填充表单，因此可以使用submit事件。

来源

2015-10-14 16:55:31

由于'＃changepassword_form_id'尚未在'document.ready'上定义，因此它将它委托给它。 –

这可以工作，但是每次点击事件都会发送请求，无论表单是否填写完毕。 – Sebi

使用'submit'事件而不是'click' –

你都清楚地追加html dom前div有连装..

继承人一步的流程的步骤分手......

要装入的.js文件的<head>内部文件。
您正在调用文件中的函数，它具有以下行，document.getElementById("main").innerHTML = changePassword;但是，但没有什么与ID“主”还没有！
然后<body>被加载，在其内部id为“主”在div是存在的。

你看到了逻辑？对？？

不好看，但这个问题是你的代码错误设计的结果，修复任何解决方法只会让你更头疼，所以我强烈建议你更新代码设计，除非你对代码的控制很少，在这种情况下，修补程序是您唯一的选择。

而且，如果您要拼凑起来，您始终可以使用.off.on事件代表团，它可以消除代码重新运行时事件重复的可能性。

来源

2015-10-14 17:01:22

jquery ajax调用不在firefox中执行

回答

相关问题