Блог

На моем веб-сайте я предоставляю пользователям возможность подписываться на авторов блогов. Прямо сейчас это php-процесс и требует обновления страницы каждый раз, когда пользователь нажимает кнопку «ПОДПИСАТЬСЯ» или «ОТКАЗАТЬСЯ от ПОДПИСКИ». Я подумал, что пришло время сделать этот процесс своего рода основанным на AJAX, поэтому, когда пользователи нажимают кнопки «ПОДПИСАТЬСЯ» или «ОТКАЗАТЬСЯ ОТ ПОДПИСКИ», обновления страницы не будет, но их массивы подписок будут обновлены. поэтому кнопки будут меняться соответственно, например, если пользователь нажмет кнопку «ПОДПИСАТЬСЯ», она изменится на «ОТКАЗАТЬСЯ от подписки» и наоборот. Проблема в том, что я никогда раньше не использовал AJAX, и я не могу найти полезную информацию для решения этой конкретной задачи, потому что ее очень много. Итак, кто-нибудь может предложить, как сделать этот процесс своего рода AJAX, чтобы не происходило обновления страницы? Если возможно, решение на основе jQuery было бы отличным.

HTML и PHP для кнопок

 //SUBSCRIBE Button
<?php if (($isLogedIN) amp;amp; ($canSubscribe) amp;amp; (!$isBlogOwner)) { ?>
<form id="subscribeform" name="subscribeform" method="post" action="blog.php?id=<?php echo $id;?>">
   <input type="submit" name="subscribe" value="Subscribe"/>
</form>
<?php } ?>

//UNSUBSCRIBE Button
<?php if (($isLogedIn) amp;amp; ($canUnSubscribe) amp;amp; (!$isBlogOwner)) { ?>
<form id ="unsubscribeform" name="unsubscribeform" method="post" action="blog.php?id=<?php echo $id;?>">
   <input type="submit" name="unsubscribe" value="Unsubscribe" />
</form>
<?php } ?>
  

PHP для обновления записей базы данных

 //Subscribe
if (isset $_POST['subscribe'])){
   //First Update Visitors Subscription Array
   if($subscription_array != ""){
      $subscription_array = "$subscription_array,$blogauthid";
   } else {
      $subscription_array = "$blogauthid";}
   $updateSubscription_array = mysql_query("UPDATE members SET subs='$subscription_array' WHERE id='$reader'") or die (mysql_error());
   //Then Update blog writers subscribers array
   $subArray7 = mysql_query("SELECT subscribers FROM members WHERE id='$blogauthid' LIMIT1");
   while($subrow7=mysql_fetch_array($subArray7)) {subscription_array7 =  $subrow7["subscribers"];}
   if ($subscription_array7 !="") {
       $subscription_array7 = "$subscription_array7,$reader";
   } else {
   $updateSubscription_array7 = mysql_query("UPDATE members SET subscribers='$subscription_array' WHERE id='$blogauthid'") or die (mysql_error());
   header("location: blog.php?id=$blogid");exit();



//Unsubscribe
if (isset($_POST['unsubscribe'])){
   //First Update visitors subscription array
   foreach ($subscription_array2 as $key => $value) {
            if ($value == $blogauthid)
                unset($subscription_array2[$key]);
            }
}
$newSubArray = implode(",", $subscription_array2);
$updateSubscription_array = mysql_query("UPDATE members SET subs='$newSubArray' WHERE id='$reader'") or die (mysql_error());
//Than update blog writers subscription array
$subArray9 = mysql_query("SELECT subscribers FROM members WHERE id='$blogauthid' LIMIT 1");
while($subrow9=mysql_fetch_array($subArray9)) {subscriber_array9 = $subrow9["subscribers"];}
$subscriber_array9b = explode(",", $subscriber_array9);
foreach ($subscribe_array9b as $key9 => $value9) {
         if ($value9 == $reader) {
             unset($subscriber_array9b[$key9]);
         }
}
$newSubArray9 = implode(",", $subscriber_array9b);
$updateblogSubsArray = mysql_query("UPDATE members SET subscribers='$newSubArray9' WHERE id='$blogauthid'") or die (mysql_error());
header ("location: blog.php?id=$blogid");exit();
  

В принципе, вы хотите иметь функцию JavaScript, подобную этой:

 function subscribe(id)
{
if (window.XMLHttpRequest)
  {// code for real browsers
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for abominations
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.status==200 amp;amp; xmlhttp.readyState==4)
    {
    document.getElementById("subscribeStatus").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","blog.php?id=" id,true);
xmlhttp.send();
}
  

Вызовите его и передайте ему нужную переменную (id) с помощью кнопки, подобной этой, во внешнем интерфейсе.

 <input type="button" name="click" value="Subscribe" onmousedown="subscribe(document.getElementById('id').value);">
  

Вставьте идентификатор пользователя в виде скрытого поля формы с id = «id» (или любым другим).

Затем на стороне PHP (blog.php ) просто обработайте это с помощью $_GET вместо $_POST . И продублируйте его для отмены подписки или найдите способ объединить его с помощью инструкции switch (или if).

Надеюсь, это поможет.

Это можно было бы немного оптимизировать, но его функциональность становится более понятной на каждом шаге, и это должно сработать. Это Jquery $.post, как и было запрошено.

Вам нужен только один элемент формы:

 <form id="subscribeform" name="subscribeform" method="post" action="blog.php?id=<?php echo $id;?>">
   <input type="submit" name="subscribe" value="Subscribe"/>
</form>
  

В нижней части вашего документа, непосредственно перед закрывающим тегом body, укажите ссылку на библиотеку jquery, за которой следует скрипт:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
    $('#subscribeform input:submit').click(function() {
        // $.post is the jquery shorthand method for $.ajax - it always uses POST 
        $.post(
                // url
                'blog.php?id=<?=$id?>',
                // serialized form data to POST
                $('#subscribeform').serialize(),
                // success callback toggles form value
                function(data) {
                    if ($('#subscribeform input:submit').val() == 'Subscribe') {
                        $('#subscribeform input:submit').
                           attr('name','Unsubscribe').val('Unsubscribe');
                    }
                    else {
                        $('#subscribeform input:submit').
                           attr('name','Subscribe').val('Subscribe');
                    }
                }
         );
    });
});