Обновление SQL через A HREF

Question

Я пытаюсь обновить mysql, щелкнув ссылку, используя AJAX, но я ударил стену. У меня есть код, но он не работает.

Вот 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>"; 

Однако при тестировании он не работает. Ссылка, когда вы просто просматриваете страницу на странице с новым комментарием, и база данных нетронутой.

Что я делаю неправильно?

Answer 1

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

    }); 
}); 

проблема Аякс вызывается функция (но не завершена до изменения местоположения) .so оно меняется расположение .so ждать функции Ajax для завершения и в вызове успеха обратно изменить расположение

Answer 2

Ваш звонок AJAX не имеет достаточного времени для завершения. Первый A в AJAX означает асинхронный, и это означает, что следующая команда window.location.href = $(this).attr('href'); запускается сразу после вашего вызова и до того, как он сможет завершить.

Переместить перемещение в ваш 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"). Таким образом, пользователь не увидит заметной задержки на вашем сайте.