Question

嗨我有下面的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]

那么如何触发上面的事件，点击带有class yearOn的元素（检查上面的html片段）和class yearOff，并将年份的其他参数设置为2011或2010

Answer 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);*/
                    }
                });
            });
});

Answer 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);*/
          }
    });

如何从外部点击事件传递jquery post请求中的额外参数？

2 个答案: