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 。