Question

在我的网站上，我为用户提供了订阅博客作者的选项。现在它是一个php进程，每次用户单击“SUBSCRIBE”或“UNSUBSCRIBE”按钮时都需要页面刷新。我认为现在是时候让这个过程基于AJAX了，所以当用户点击“SUBSCRIBE”或“UNSUBSCRIBE”按钮时，没有页面刷新，但是他们的订阅数组会被更新。因此按钮将分别改变，例如如果用户点击“SUBSCRIBE”按钮，它将变为“UNSUBSCRIBE”并向后。问题是我以前从未使用过AJAX而且找不到有用的信息来完成这个特定的任务，因为它有很多。所以有人可以建议如何使这个过程类型的AJAX，所以没有页面刷新发生？如果可能的话，基于jQuery的解决方案会很棒。

HTML＆amp; PHP for Buttons

//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 =＆＃34; id＆＃34; （或其他）。

然后在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>

在文档的底部，就在关闭正文标记之前，链接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');
                    }
                }
         );
    });
});

如何将以下PHP进程转换为AJAX进程？

2 个答案: