更改Javascript變量不刷新

我想知道如何去改變JavaScript中的「image.src」而不刷新頁面（以及沒有清除畫布）。更改Javascript變量不刷新

我在想使用像AJAX這樣的東西（我從來沒有用過它），但我不確定這是否是正確的路徑。任何人都可以幫我嗎？

這裏是我的代碼：

<form> 
Image URL:<input type="text" size="50" name="i" value="<?php echo $_REQUEST['i']?>" /> 
Background Color:<select name="color" > 
<?php if($_REQUEST['color'] == "#000000"){ ?> 
    <option value="#000000">Black</option> 
    <option value="#ffffff">White</option> 
    <?php }else{ ?> 
    <option value="#ffffff">White</option> 
    <option value="#000000">Black</option> 
    <?php } ?> 
</select> 
<input type="submit"/> || Back to the <a href="/cloner/index.php">Home Page</a> 
</form> 
</div> 
     <script type="text/javascript"> 
     var imageWidthHalf, imageHeightHalf; 
     var canvas = document.createElement('canvas'); 
     var height = window.innerHeight; 
      canvas.width = window.innerWidth; 
      canvas.height = height; 
      canvas.style.display = 'block'; 
      document.body.appendChild(canvas); 
      var context = canvas.getContext('2d'); 
      var image = document.createElement('img'); 
      image.addEventListener('load', function() { 
       imageWidthHalf = Math.floor(this.width/2); 
       imageHeightHalf = Math.floor(this.height/2); 
       document.addEventListener('mousemove', onMouseEvent, false); 
       document.addEventListener('touchstart', onTouchEvent, false); 
       document.addEventListener('touchmove', onTouchEvent, false); 
      }, false); 
      image.src = "<?php echo $_REQUEST['i']; ?>"; 
      function onMouseEvent(event) { 
       context.drawImage(image, event.clientX - imageWidthHalf, event.clientY - '50' - imageHeightHalf); 
      } 
      function onTouchEvent(event) { 
       event.preventDefault(); 
    for (var i = 0; i < event.touches.length; i++) { 
        context.drawImage(image, event.touches[i].pageX - imageWidthHalf, event.touches[i].pageY - imageHeightHalf); 
       } 
      } 
     </script>

來源

2012-01-01 Alice

，如果你可以讓我編輯您的代碼，以便它會更好看 – ianace 2012-01-01 04:06:35

你要什麼的'img.src'改變？如果在網頁的JavaScript中知道該URL，則只需設置「img.src = url」即可。如果您必須從服務器獲取URL，那麼您將使用ajax調用來獲取URL，然後分配'img.src'。 – jfriend00 2012-01-01 04:11:47

@ianace如果你必須，但我alreayd下面從約瑟夫西爾伯答案。 – Alice 2012-01-01 04:46:28

document.querySelector('input[name="i"]').addEventListener('blur', function() { 
    image.src = this.value; 
}, false);

來源

2012-01-01 04:10:08

更改Javascript變量不刷新

回答

相關問題