在我的网站上，我给用户一个订阅博客作者的选项。现在它是一个php进程，每次用户点击"订阅"或"取消订阅"按钮时都需要刷新页面。我认为是时候让这个过程有点基于AJAX了，这样当用户单击"SUBSCRIBE"或"UNSUBSCRIBE"按钮时，页面不会刷新，但他们的订阅数组会更新。因此，按钮将分别更改，例如，如果用户点击"订阅"按钮，它将更改为"取消订阅"和反向。问题是我以前从未使用过AJAX，我找不到有用的信息来完成这个特定的任务，因为有很多这样的信息。那么，谁能建议如何使这个过程类似于AJAX，从而不发生页面刷新?如果可能的话，基于jQuery的解决方案会很棒。
HTML,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();
基本上你想有一个这样的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 = " ID "(或其他)。
然后在PHP端(blog.php)只处理$_GET而不是$_POST。并复制它以退订或使用switch(或if)语句找到一种方法将其一起使用。
希望对你有帮助。
这可以稍微优化一下，但它的功能在每个步骤中都更清晰，应该可以工作。这是Jquery $。按要求发帖。
只需要一个表单元素:
<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');
}
}
);
});
});