Ajax 调用后 HTML 恢复到原始状态

Question

我目前在我的 HTML 页面上有一个按钮，它使用 javascript 将 html 加载到当前页面中。在新加载的 HTML 上有可以填写的表格。当用户提交表单时，我使用 ajax 来处理它。一旦 ajax 处理表单并将信息存储到数据库中，我将调用成功函数来更改 div 中的当前 HTML。内部 HTML 会在一瞬间发生变化，但随后整个页面会恢复到原始 HTML 状态。

这是我用来提交表单的 javascript

function myFunction() {
    var deck_name = document.getElementById("deck_name").value;
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'deckName=' + deck_name;
    if (deck_name == '') {
      alert("Please Fill All Fields");
    } 
    else {
       // AJAX code to submit form.
       $.ajax({
       type: "POST",
       url: "../API/deck_api.php",
       data: dataString,
       cache: false,
       success: function() {
                   document.getElementById('right-panel').innerHTML = loadPage('../HTML_files/edit_deck.html');
                }
       });
    }
    return false;
 }

这就是 loadPage() 的作用：

 function loadPage(href) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", href, false);
    xmlhttp.send();
    return xmlhttp.responseText;
 }

我怎样才能做到这一点，当 ajax 成功时，它会更改 right-panel 的内容并保持这种状态，而不是完全恢复到 HTML 的原始状态。

Answer 1

function myFunction() {
    var deck_name = document.getElementById("deck_name").value;
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'deckName=' + deck_name;
    if (deck_name == '') {
      alert("Please Fill All Fields");
    } 
    else {
       // AJAX code to submit form.
       $.ajax({
       type: "POST",
       url: "../API/deck_api.php",
       data: dataString,
       cache: false,
       success: function() {
                  $("#right-panel").html(span);
        }
       });
    }
    return false;
 }