javascript - 使用 JavaScript 更新 div 内容

Question

我正在尝试制作 Qr 代码生成器。我在那里输入了用户输入网站的 URL，这个 URL 通过 Ajax 进入 php 文件，php 文件检查验证并返回 URL 链接。这个结果传递到 jQuery ('#output').qrcode(url); 和结果显示在 div 中。问题是当 Qr 码设置在 div 下一次如果用户更新 url 而不是再次生成新的 Qr 码并且结果是两个不同的 Qr 代码。当用户更新链接而不是最后一个 Qr 代码图像删除和更新的 Qr 代码图像显示时，我怎么能处理这个。

我正在展示我所做的检查我的 JavaScript 和 HTML 代码。

JavaScript

function grcodeg() {

      $(document).ajaxStart(function() {
        $("#qr-preview").html('<img src="editor/loader.gif"/>').show();
           $("#output").css("display","none").hide();})
        .ajaxStop(function() {
                $("#qr-preview").html('<img src="editor/loader.gif" />').hide();
                $("#output").css("display","block").show();
          });

        $("#qr-form").ajaxForm(function(url){        
               jQuery('#output').qrcode(url);
    }).submit();        

          }

HTML

<form action="editor/arcode_g.php" method="post" id="qr-form">
  <label for="url-qr">Link to a Website</label>
   <br>
     <input type="url" name="url-qr">
   <br>
      <label for="label-qr">Add QR Label</label>
         Describe what your QR code will do.
    <br>
         <input  type="text" name="label-qr">
     <br>
          <a onclick="grcodeg();">Ok</a>
      </form>

   <!----Qr Code Result------------->

    <div id="qr-preview"></div>
    <div id="output"></div>

Answer 1

如果我理解了这个问题，那么你需要改变这个:

 $("#qr-form").ajaxForm(function(url){        
           jQuery('#output').qrcode(url);
}).submit(); 

为此:

 $("#qr-form").ajaxForm(function(url){        
          $("#output").html("");
           jQuery('#output').qrcode(url);
}).submit(); 

在再次绘制之前清除div