通过A HREF进行SQL更新 - SQL update via A HREF

我试图通过使用AJAX点击链接来更新mysql，但遇到了麻烦。我有代码，但它不起作用。

这是AJAX：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
   //bind a listener to "click" event on links with class "markviewed"
   $('a.markviewed').click(function(event) {
  //prevent default behavior just in case
  event.preventDefault();
  //get ids from clicked <a>
  var myid = $(this).attr('data-myid');
  var postid = $(this).attr('data-postid');
  //ping the address to mark clicked link as viewed
  $.ajax('http://mywebsite.com/mark_viewed.php?myid=' + myid + '&postid=' + postid');
  //redirect to the link in the href attribute
  window.location.href = $(this).attr('href');
   });
});
</script>

这应该创建一个href类，当单击该类时，它会访问mywebsite.com/mark_viewed.php，该类会使用作为$myid和$postid发送的关键变量更新我的数据库。

这里是mark_viewed.php：

<?php
$con=mysqli_connect("XXX","XXX","XXX","XXX");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
// get values sent from address bar
$myid=$_GET['myid'];
$postid=$_GET['postid'];
mysqli_query($con,"UPDATE comments SET status='viewed' WHERE to_id ='$myid' AND id='$postid'");
mysqli_close($con);
?>

最后，这是用户看到的链接：

$myid = $row['user_id']; // my id
$name = $row['board_name']; // collection name
$boardid = $row['board_id']; // collection id
$postid = $row['pin_id']; // post id
$url = $row['pin_url']; // image url
echo "<li><a href='/board/pins/$boardid/$postid' data-myid=' . $myid . ' data-postid=' . $postid . ' class='markviewed'>";
echo "<img src='$url' height='50' width='50'>";
echo "New comment in $name.";
echo "</a></li>";

然而，在测试中，它不起作用。当点击时，链接只会浏览到带有新评论的页面，数据库不会受到影响。

我做错了什么？

$(document).ready(function() {
   $('a.markviewed').click(function(event) {
   event.preventDefault();
   var myid = $(this).attr('data-myid');
   var postid = $(this).attr('data-postid');
   $.ajax('http://mywebsite.com/mark_viewed.php?myid=' + myid + '&postid=' + postid).done(function(){
  window.location.href = $(this).attr('href');
});
   });
});

问题是ajax函数被调用了（但在位置更改之前没有完成）。所以它正在更改位置。所以等待ajax函数完成，在成功回调时更改位置

您的AJAX调用没有足够的时间完成。AJAX中的第一个A代表异步，这意味着下一个命令window.location.href = $(this).attr('href');会在AJAX调用之后立即运行，然后才能完成。

将重新定位移动到您的AJAX回调，如

  //ping the address to mark clicked link as viewed
  $.ajax('http://mywebsite.com/mark_viewed.php?myid=' + myid + '&postid=' + postid', function(){
       //redirect to the link in the href attribute
       window.location.href = $(this).attr('href');
  });

您还应该考虑添加等待动画，以防您的呼叫需要很长时间。

作为一种良好的编码实践，最好避免像这样劫持点击，并在目标页面的开头用php记录所需信息，然后打印新页面内容。

如果链接是外部的，您可以链接到一个重定向页面（redirect.php？target_url=www.externallink.com），该页面记录所需信息并立即调用header(Location: "www.externallink.com")。这样用户就不会在你的网站上看到任何可察觉的延迟。