使用 XMLHttpRequest 删除后我的页面仍然重新加载

Question

我正在尝试从我的页面和数据库中删除图像而不重新加载页面。

html

   <div class ="thumbnail">
            <div class="gallery-box" id="Display">
                <!-- Thumbnail image -->
                <?php if (isset($image->thumbnailUrl)) echo '<img src="' . htmlspecialchars($image->thumbnailUrl, ENT_QUOTES, 'UTF-8').'">'; ?>
                <a href="#" onClick="deleteSingleImage('<?php echo htmlspecialchars($image->id, ENT_QUOTES, 'UTF-8'); ?>')" class="caption simple-caption delete-single-image">
                <span class="glyphicon glyphicon-trash"> Delete</span>
                </a>
            </div>
        </div>

javascript

function deleteSingleImage(id)
{
  var xmlhttp;
  if (id=="")
    {
        document.getElementById("Display").innerHTML="";
        return;
    }
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
  else
  {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          window.location.reload()

        }
  }
      xmlhttp.open("GET", url + "/album/deleteimage/"+id,true);
      xmlhttp.send();

}

php

public function deleteImage($image_id)
{
  $sql = "...."
  //code to delete the image from database
}

我的图片已从我的数据库中删除。

图像从页面上消失。

删除链接获取正确的ID。

但是当我进行删除时页面会重新加载。怎么了？如何在不重新加载页面的情况下删除？

Answer 1

ajax 响应后您正在重新加载页面。

试试这个：

    function deleteSingleImage(id)
{
  var xmlhttp;
  if (id=="")
    {
        document.getElementById("Display").innerHTML="";
        return;
    }
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
  else
  {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          //Remove the image element from DOM

        }
  }
      xmlhttp.open("GET", url + "/album/deleteimage/"+id,true);
      xmlhttp.send();

}