javascript - Ajax POST 仅在页面刷新时执行 php 脚本

Question

我有一个 Canvas 元素来收集用户签名，然后我有一个带有 onclick 功能的按钮将签名保存到服务器，这运行一个 ajax 脚本将数据发布到一个 php 文件。我遇到的问题是，虽然数据已保存，但我必须单击按钮，然后刷新页面才能使保存事件实际发生。请帮我看看哪里出了问题，因为我不想手动刷新。代码如下。

Canvas HTML 元素:

  <div class="signature-pad--body">
     <canvas id="signCanvas"></canvas>
  </div>
  <div class="signature-pad--footer">
     <div class="description">Sign above</div>
         <div class="signature-pad--actions">
              <div>
                <button type="button" class="button clear" data-action="clear">Clear</button>
                <button type="button" class="button" data-action="undo">Undo</button>
              </div>
              <div>
              <input type="button" class="button save" onclick="signUploader()" id="signReady" value="Upload above Signature" />
              </div> 
          </div>
        </div>
     </div>

JS Ajax 脚本:

 <script type="text/javascript"> 
   function signUploader() {
   // Generate the image data

   var pic = canvas.toDataURL('image/png');
   pic = "data="+pic;
   console.log(pic); //just for seeing that it's working
      $.ajax({
          url: "includes/signSave.php",
          type: "POST",
          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
          dataType: "text", 
          data: pic ,                   
          beforeSend : function() {
            $("#signCanvas").fadeOut(); }
      });
    }
 </script>

签名保存.php

 <?php

   $img = $_POST['data'];
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $fileData = base64_decode($img);
   $file = '../../uploads/signature' . time() . '.png';
   file_put_contents($file, $fileData);
?>

这是我第一次玩ajax，所以请帮助我，并解释其中是否有错误。谢谢

Answer 1

我认为您应该从 signSave.php 返回 true 并且成功后，您可以重新加载页面，如下所示。

 'success' : function(data) {              
                window.location.reload();
            }