如何在不刷新页面的情况下更新MySQL数据库

3
感谢查看。我有一个非常长的项目列表,用户通过点击图像(加号)将该项目添加到他们的个人列表中。目前,当他们单击+时,它会加载“add-item.php?itemid = *”,该文件处理下面的代码,然后将其重定向到他们自己的列表。我曾经将其重定向回全局列表,但是对于用户来说,如果该项已添加到他们的列表中,则不清楚。我应该如何使它更新数据库而无需去任何地方,我在考虑JavaScript但从未编写过。任何帮助都将是非常好的!! :)
<?php 
ini_set('display_errors', 'On');
error_reporting(E_ALL);

 $bucketlist=MYSQL_QUERY( "SELECT * FROM membersbuckets where userid = $userid AND bucketid = $bucketid")
 or die(mysql_error());  

          $bucketlist=mysql_fetch_array( $bucketlist ) ;

            if($bucketlist < 1) {

            mysql_query("INSERT INTO membersbuckets (memberbucketid, userid, bucketid, complete)
            VALUES ('', '$userid', '$bucketid', '0')");
            echo "Adding item to your bucketlist...";
            echo "<meta http-equiv='Refresh' content='2; URL=mybucketlist.php'/>";
            }
            else {
            echo "This item is already on your list, redirecting you to your list";
            echo "<meta http-equiv='Refresh' content='2; URL=mybucketlist.php'/>";
            }
?> 

提前感谢您!:)

4个回答

6
你需要使用AJAX,正如其他人所说的那样。
由于你从未编写过任何Javascript代码,因此这里有一个指南供你参考。
在你的

标签中,使用XMLHttpRequest对象来发送数据并从服务器获取响应。

<a href="add-item.php?itemid='.$itemId.'" > Add Item </a>

编写

<a onclick="addItemToUsersList('.$itemId.')" > Add </a>

对于AJAX,建议使用Angelo提到的jquery。下载并添加以下内容。
<script type="text/javascript" src="http://path/to/jquery-latest.min.js"></script>
<script type="text/javasript">
function addItemToUsersList(itemId)
{
  $.ajax({
    'url': 'path/to/add-item.php', 
    'type': 'GET',
    'dataType': 'json', 
    'data': {itemid: itemId}, 
    'success': function(data) 
    {
      if(data.status)
      {
        if(data.added)
        {
          $("span#success"+itemId).attr("innerHTML","Item added to your personal list");
        }
        else
        {
          $("span#success"+itemId).attr("innerHTML","This item is already on your list");
        }
      }
    },
    'beforeSend': function() 
    {
      $("span#success"+itemId).attr("innerHTML","Adding item to your bucketlist...");
    },
    'error': function(data) 
    {
      // this is what happens if the request fails.
      $("span#success"+itemId).attr("innerHTML","An error occureed");
    }
  });
}
</script>

最后,在你的path/to/add-item.php文件中编写代码以添加项目。参数itemId将在此处作为$_GET['itemId']可用。只需使用json_encode返回适当的状态值即可。

if($bucketlist < 1) 
{
  mysql_query("INSERT INTO membersbuckets (memberbucketid, userid, bucketid, complete) VALUES ('', '$userid', '$_GET['itemId]', '0')");
  return json_encode(array("status" => true, "added" => true));
}
else
{
  return json_encode(array("status" => true, "added" => false));
}

1
Sandeepan,首先感谢您如此详细的回答!我已经下载(并上传)了jquery的副本...添加了指向jquery文件的链接,并在head标签之间添加了功能脚本。添加了点击代码: <a onclick='addItemToUsersList("<?php echo $itemid ; ?>")'> Add<img src='images/plus-green.png' /> </a> 虽然添加链接有超链接的颜色和鼠标悬停时的颜色变化,但实际上什么都没有发生...我创建了一个测试页面的副本来进行测试-http://olbl.co.uk/showbucketsTEST.php。您能看出我做错了什么吗? 谢谢!:) - Dan
感谢您的第一个最佳答案... 我检查了您的测试页面。它显示“302暂时移动”错误。请访问网址http://olbl.co.uk/member-bucketadd-execTEST.php?itemId=25并查看。它会重定向到您的登录页面。AJAX处理文件不应该受到登录保护。删除重定向即可正常工作。 - Sandeepan Nath
这里需要进行一点更正... 代码可以进行登录保护,但是需要移除重定向。改为返回一个 JSON 数组,然后像其他情况一样显示消息。 - Sandeepan Nath

3
你可以通过使用JavaScript中的"AJAX"实现此操作。异步JavaScript和XML请求允许JavaScript向另一页发送请求并从中获取结果。
因此,使用ajax,您将转到所需的URL,然后可以向用户显示消息。
我使用一个称为jQuery的库来完成这样的操作。
$.ajax({
    'url': 'path/to/add-item.php', 
    'type': 'GET',
    'dataType': 'json', 
    'data': {itemid: xx}, 
    'success': function(data) {
      // what happens if the request was completed properly
    },
    'error': function(data) {
      // what happens if the request fails.
    }
  });

请注意,仅因请求成功完成,并不意味着项目已按需添加。
我建议您阅读以下内容,以充分理解如何将其适应于您的需求。

http://json.org/

http://api.jquery.com/jQuery.ajax/

http://ca3.php.net/json_encode


1

http://jquery.com/ 是我的建议。您需要通过一些 AJAX 调用与服务器交互,然后获取结果并将信息显示给用户。我更喜欢 JQuery,因为它简化了许多这些调用,并且其文档相当不错。有很多基础教程的教程可供参考。

一个简单的谷歌搜索就可以找到很多 http://www.google.com/search?q=jquery+ajax+tutorial


0

在你的项目中,您可能真的想使用JavaScript!因为您正在告诉自己,您不希望导航离开当前页面,并且希望在当前页面上显示一个小消息,向用户确认..那么您需要使用一些称为AJAX-异步JavaScript和XML的东西。它是PHP和Javascript的结合。

使用AJAX可以在不刷新页面的情况下更新当前加载的页面。这里HTML并没有连接或请求服务器,而是Javascript。因此,您可以实现-> [我该如何使其全部更新数据库而无需去其他地方]..

至于AJAX和Javascript,它们非常简单!只需要学习它们的基本语法,然后您就可以进一步学习了!

参考资料:

-> 您可以参考最佳书籍-

Professional Ajax Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett


代码块不适用于引用。请使用块引用(>)代替。 - ADTC

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接