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;
 }

Ajax调用后HTML回到原始状态

1 个答案: