Как превратить следующий процесс PHP в процесс AJAX?

Question

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

---

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

//SUBSCRIBE Button
<?php if (($isLogedIN) && ($canSubscribe) && (!$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) && ($canUnSubscribe) && (!$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();

Answer 1

Как правило, вы хотите иметь функцию 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 && 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).

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

Answer 2

Это можно немного оптимизировать, но его функциональность становится более понятной на каждом этапе, и она должна работать.Это запрос 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');
                    }
                }
         );
    });
});