切换Jquery表单Posts

Toggle Jquery form Posts

本文关键字：Posts 表单 Jquery 切换      更新时间：2023-09-26

我有一个简单的切换按钮，用户可以使用它来订阅或取消订阅他们所属的组。我有两个表单可以获得帖子，根据表单发布到的页面，用户可以订阅或取消预订。这是我的代码，我正在寻找更好的方法。目前，我的用户可以点击订阅或取消订阅，但他或她必须重新加载页面才能更改设置。换句话说，它运行良好，但没有切换。。。用户不能在订阅和取消订阅之间来回点击，因为他们必须刷新页面并重新提交。我也想修复切换功能。谢谢你的帮助。

<script type="text/javascript">
//Capturing get parameter
 var param1var = getQueryVariable("group_id");
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
}
var owner = getQueryVariable('group_id');
var dataString = "owner="+ owner;
$(function() {
$("#subscribe").click(function(){
 $.ajax({
   type: "POST",
   url: "groupnotifications.php",
    data: dataString, 
success: function(){
$("#subscribe").removeClass("notifications_subsc");
$("#subscribe").addClass("not_subscribed_group");
}
 });
});
});
</script>

<script type="text/javascript">
//Capturing get parameter
 var param1var = getQueryVariable("group_id");
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
}
var owner = getQueryVariable('group_id');
var dataString = "owner="+ owner;
$(function() {
$("#notsubscribed").click(function(){
 $.ajax({
   type: "POST",
   url: "groupnotificationsoff.php",
    data: dataString, 
success: function(){
$("#notsubscribed").removeClass("not_subscribed_group");
$("#notsubscribed").addClass("notifications_subsc");
}
 });
});
});
</script>

当服务器端脚本可用时，不需要依赖解析查询字符串。相反，当最初提供页面时，安排PHP将group_id值写入（例如）一个隐藏的输入字段，然后该字段就可以在客户端读取到javascript/jQuery中。（其他技术可用）

安排您的"groupnotifications.php"脚本接收$_POST[操作]指令以订阅或取消订阅也是一个好主意。这样，应用程序的客户端部分就可以行使控制权。

有了这些更改，代码将是这样的：

$(function() {
    $("#subscribe").click(function(){
        var $s = $(this).attr('disabled',true);//disable button until ajax response received to prevent user clicking again
        var clss = ['not_subscribed_group','notifications_subsc'];//The two classnames that are to be toggled.
        var dataOj = {
            owner : $s.closest(".groupContainer").find('.group_id').val(),//relating to element <input class="group_id" type="hidden" value="..." />
            action : ($s.hasClass(clss[0])) ? 1 : 0;//Instruction to 1:subscribe or 0:unsubscribe
        };
        $.ajax({
            type: "POST",
            url: "groupnotifications.php",
            data: dataObj,
            success: function(status) {//status = 1:subscribed or 0:unsubscribed
                switch(Number(status)){
                    case 1:
                        $s.removeClass(clss[1]).addClass(clss[0]);
                    break;
                    case 0:
                        $s.removeClass(clss[0]).addClass(clss[1]);
                    break;
                    default:
                        //display error message to user
                }
            }
            error: function(){
                //display error message to user
            }
            complete: function(){
                $s.attr('disabled',false);
            }
        });
    });
});

未经测试

注意：语句$s.closest(".groupContainer").find('.group_id').val()依赖于具有class="group_id"的隐藏输入元素，并允许在同一页上有多个组，每个组都有自己的切换操作。只需确保每个组都用class="groupContainer"封装在一个元素（例如div或td）中。

相关文章：