Javascript：如果稍后重定向到另一个页面，则无法将数据添加到数据库

Question

我在使用 Javascript 时遇到了一个非常奇怪的问题我可以填写表单，然后单击保存以成功将表单中的数据保存到数据库但是如果我将window.location.href = "deadlines.html"添加到末尾插入到数据库的函数，重定向到该页面，数据不会保存到数据库

这是代码： http : //jsfiddle.net/ajSte/

<form id="formDeadlineInfo">
        <label for="shortDescription">Short Description</label>
        <input id="shortDescription"  type="text">
        <br>
        <label for="class">Class</label>
        <select id="class" class="ui-selectmenu" >
          <option value="HCI">HCI</option>
          <option value="DataMining">Data Mining</option>
          <option value="MobileDev">Mobile Dev</option>
          <option value="Ethics">Ethics</option>
        </select>
        <br>
        <label for="dueDate">Due Date</label>
        <input id="dueDate" type="date">
        <br>
        <label for="dueTime">Due Time</label>
        <input id="dueTime" type="time">
        <br>
        <label for="type">Type</label>
        <select id="type">
          <option value="Homework">Homework</option>
          <option value="Test">Test</option>
        </select>
        <br>
        <label for="additionalInfo">Additional Info</label>
        <input id="additionalInfo" type="text">
        <br>
        <label for="finished">Finished</label>
        <select data-role="flipswitch" id="finished" class="ui-selectmenu" >
          <option value="no" selected>No</option>
          <option value="yes">Yes</option>

        </select>

        <input type="button" class="ui-btn ui-btn-active ui-btn-icon-bottom" data-role="button" value="Save" style="text-align:center" onClick="getFormInfo()">

    </form>

和 Javascript： http : //jsfiddle.net/ajSte/抱歉，这个“代码”功能很难处理，请参阅 jsfiddle

我在这些代码运行之前已经打开并填充了数据库，所以不需要询问它如果你能帮我解决问题，非常感谢

Answer 1

但是如果我将 window.location.href = "deadlines.html" 添加到插入数据库的函数的末尾，重定向到该页面，数据将不会保存到数据库

这一点也不奇怪。 插入操作是异步的，这意味着您的代码启动它，但稍后完成（这就是它接受回调的原因）。

如果你告诉代码让用户离开页面，异步操作在它完成之前就会被取消。 您需要等待，然后在成功回调中使用该代码写入window.location.href 。

例如：

function insertDeadlineToDB(dbId,dbDescription,dbClass,dbDueDate, dbDueTime, dbType, dbAdditionalInfo, dbFinished) {
    //alert('insert called');

    //alert('before insert');
    db.transaction(function(tx){
        tx.executeSql(
            'INSERT INTO deadlines (id, description, class, dueDate, dueTime, type, additionalInfo, finished) VALUES (?,?,?,?,?,?,?,?)',
            [dbId,dbDescription,dbClass,dbDueDate, dbDueTime, dbType, dbAdditionalInfo, dbFinished], function() {
               successCB();
               window.href.location = "deadlines.html"; // <=== Here
            }, errorCB);
        ////alert(tx);
   });
   //window.href.location = "deadlines.html";              <=== Not here
}

---

旁注：代码缺少变量，例如未在任何地方定义的successCB 。