Question

我一直在处理一个程序的一部分，该程序在按下按钮时将当前显示页面的html保存到另一个文件。我的问题是，如果你在几秒钟之间按下按钮就可以正常工作，但是如果你多次按下按钮，它将保存文件，但文件中的html不正确。它基本上看起来像是将原始html内容的多个副本保存到文件中。

以下是我正在使用的代码：

HTML：

<form method="POST" action="app/savePage.php" id="file-options-form" name="file-options-form">

    <!--used to store content before it is saved-->
    <input type="hidden" value="" name="content" id="tm-content">

    <!--used to store scripts before it is saved-->
    <input type="hidden" value="" name="scripts" id="tm-scripts">

    <!--used to store styles before it is saved-->
    <input type="hidden" value="" name="styles" id="tm-styles">

    <span id="file-button-container">
        <input type="button" name="new-page-button" value="New Theme" id="new-page-button">
        <input type="submit" name="save-button" value="Save Theme" id="save-button">
        <label for="theme-name">Theme Name:</label>
        <input type="text" value="" name="theme-name" id="theme-name">
    </span>

</form>

的Javascript / JQuery的：

$("#file-options-form").submit(function(e){//begin function

 //stop form from submitting
 e.preventDefault(); 

 //the content to save
 var contentToSave = [];

 //add the html of the file to the contentToSave array
 contentToSave.push($("html")[0].outerHTML);

 //store the content in the #tm-content hidden input box
 $("#tm-content").val(contentToSave.join(""));

 //url for saveTheme.php file
 var url = "/thememaker/app/saveTheme.php";

 //begin ajax function
 $.ajax({//begin ajax function
    type:"POST",
    url: url,
    data:$(this).serialize(),
     success:function(data){//begin success function

     },//end success function
     error:function(e){

        alert(e);

     }

 //todo: fix multiple button press problem
 });//end ajax function

});//end function

尝试修复：

我尝试在点击时禁用该按钮，然后在ajax成功功能上启用它
我尝试在点击时隐藏按钮，然后启用ajax成功功能

Answer 1

这是我问题的真正解决方案。在成功提交表单后，我没有清除#tm-content输入框的内容。

       $("#file-options-form").submit(function(e){//begin function

             //stop form from submitting
             e.preventDefault(); 

            //the content to save
            var contentToSave = [];

           //add the html of the file to the contentToSave array
           contentToSave.push($("html")[0].outerHTML);

          //store the content in the #tm-content hidden input box
          $("#tm-content").val(contentToSave.join(""));

          //url for saveTheme.php file
          var url = "/thememaker/app/saveTheme.php";

         //begin ajax function
         $.ajax({//begin ajax function
                type:"POST",
                 url: url,
                 data:$(this).serialize(),
                 success:function(data){//begin success function


           //clear the content when it is submitted successfully
           $("#tm-content").val(""); //<------code that fixed the problem

         },//end success function
            error:function(e){

             alert(e);

         }


         });//end ajax function

防止保存html内容的多个副本

1 个答案: