通过HREF更新SQL

I'm trying to update mysql by clicking a link using AJAX but I've hit a wall. I have the code but its not working.

Here's the 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>

This should create an a href class that when clicked hits mywebsite.com/mark_viewed.php which updates my database with key variables sent as $myid and $postid.

Here is 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);
?>

And finally this is the link the user sees:

$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>";

However, in testing it doesn't work. The link when click just surfs to the page with the new comment and the database is untouched.

What am I doing wrong?

$(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');
});

   });
});

the problem is ajax function is called (but not completed before location change).so it is changing location .so wait for the ajax function to complete and in the success call back change the location

Your AJAX call does not have enough time to complete. The first A in AJAX stands for Asynchronous and that means that the next command window.location.href = $(this).attr('href'); runs immediately after your AJAX call and before it is able to complete.

Move the relocation to your AJAX callback such as

  //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');
  });

You should also consider adding a waiting animation in case your call takes a long time.

As a good coding practice, it is better to avoid hijacking clicks like this, and log the required information with php in the beginning of your target page and then print your new page content.

If the link is external, you can link to a redirect page (redirect.php?target_url=www.externallink.com) that logs the required info and calls header(Location: "www.externallink.com") right away. This way the user won't see any perceivable delay in your site.