如何从外部点击事件在 jquery 发布请求中传递额外的参数？答案

【问题标题】：How to pass extra parameter in jquery post request from outside click event?如何从外部点击事件在 jquery 发布请求中传递额外的参数？
【发布时间】：2014-02-11 01:23:21
【问题描述】：

您好，我有如下的 jquery 请求，

$('#filterForm').submit(function(e){
        e.preventDefault();
        var dataString = $('#filterForm').serialize();
        var class2011 = document.getElementById("2011").className;
        //var validate = validateFilter();
        alert(dataString);
        if(class2011=='yearOn')
            {
                dataString+='&year=2011';
                document.getElementById("2011").className='yearOff';
            }
        else
            {
            document.getElementById("2011").className='yearOn';
            }

         alert (dataString);

          $.ajax({
            type: "POST",
            url: "myServlet",
            data: dataString,
            success: function(data) {
                /*var a = data;
                alert(data);*/
            }
          });

我的表单就像，

<form  method="post" name="filterForm" id="filterForm">
  <!-- some input elements -->
</form>

好吧，我在表单的提交事件上触发 jquery 提交，（它工作正常）我想在表单内部传递一个额外的参数，它不在上面的表单内容中，但它在页面之外如下所示

[查看此图片链接以获取代码预览][1]

那么我如何触发上面的事件，点击时，带有类 yearOn（检查上面的 html sn-p）和类 yearOff 的元素，并将年份的附加参数设置为 2011 或 2010

【问题讨论】：

代码看起来不错。附加 year= 参数后，数据字符串的警报结果是什么？
结果没有问题，但是我想在同一个发布请求中调用具有附加一个参数的相同函数，但是如何在单击某些外部 div 或锚元素时调用相同的发布请求请求中的“附加参数”，我可以修改提交事件，并在提交（函数（e，额外参数）中添加一个附加参数吗？
您永远不应该为data 使用字符串。而是创建一个对象；这使得访问值更容易，并且让您不必关心值中的转义字符，例如 &。
如果您不确定如何或不理解“创建对象”，它的意思很简单：data: { id = value } 其中 id 是您的操作参数的名称，value 是你传递的价值
我想，我可以用表单内的隐藏元素来做到这一点，有没有更好的方法来做同样的事情？

标签： javascript jquery

【解决方案1】：

$(document).ready(function () {
            $('#filterForm').submit(function (e) {
                e.preventDefault();
                var dataString = $('#filterForm').serialize();
                if ($("#2011").hasClass('yearOn')) {
                    dataString += '&year=2011';
                    $("#2011").removeClass('yearOn').addClass('yearOff');
                }
                else {
                    $("#2011").removeClass('yearOff').addClass('yearOn'); 
                }

                $.ajax({ 
                    url: "/myServlet",
                    type: "POST",                       
                    data: dataString,
                    success: function (data) {
                        /*var a = data;
                        alert(data);*/
                    }
                });
            });
});

【讨论】：

【解决方案2】：

1.) 如果你已经在使用 jQuery，你可以使用 jquery 提供的 $.post() 函数。在大多数情况下，它会让您的生活更轻松。

2.) 我总是以这种方式成功发布带有额外参数的帖子：

在这里为您构建额外的参数

    commands={
            year:'2011'
    };

将它与您的表单序列化结合起来

var dataString=$.param(commands)+'&'+$("#filterForm").serialize();

在此处发布您的帖子

$.post("myServlet",data,
        function(data) {
            /*var a = data;
        alert(data);*/
    }
    );

如果你真的喜欢它，也可以使用 $.ajax

$.ajax({
        type: "POST",
        url: "myServlet",
        data: dataString,
        success: function(data) {
            /*var a = data;
            alert(data);*/
      }

最后，这里是你现在做的完整代码

   $('#filterForm').submit(function(e){
        e.preventDefault();
        var class2011 = document.getElementById("2011").className;
        //var validate = validateFilter();
        alert(dataString);
        if(class2011=='yearOn') {
                dataString+='&year=2011';
                document.getElementById("2011").className='yearOff';
        } else {
            document.getElementById("2011").className='yearOn';
        }
         commands={
                year:'2011'
         };

         var dataString=$.param(commands)+'&'+$("#filterForm").serialize();

         alert (dataString);

          $.ajax({
            type: "POST",
            url: "myServlet",
            data: dataString,
            success: function(data) {
                /*var a = data;
                alert(data);*/
          }
    });

【讨论】：