【问题标题】:jQuery: serialize() form and other parametersjQuery:serialize() 表单和其他参数
【发布时间】:2012-05-11 01:03:21
【问题描述】:

是否可以通过单个 AJAX 请求发送 form 元素(使用.serialize() 方法序列化)和其他参数?

例子:

$.ajax({
    type : 'POST',
    url : 'url',
    data : {
        $('#form').serialize(),
        par1 : 1,
        par2 : '2',
        par3: 232
    }
}

如果不是连同其他参数一起提交表单的最佳方式是什么?

谢谢

【问题讨论】:

    标签: jquery ajax forms serialization


    【解决方案1】:

    serialize() 有效地将表单值转换为有效的查询字符串,因此您可以简单地附加到字符串:

    $.ajax({
        type : 'POST',
        url : 'url',
        data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
    }
    

    【讨论】:

    • @Falcon 你这里的coconut是什么意思?
    • 如何将 1 更改为变量
    • @Shafizadeh 押韵(很多 - 椰子)
    • 你能告诉我为什么这里不需要 contentType 吗?是默认添加的吗?
    • 是的,表单 url 编码是默认设置。有关更多信息,请参阅 jquery 文档
    【解决方案2】:

    如果您将参数存储在某个对象变量中,您也可以将form.serialize()$.param(object) 一起使用。用法是:

    var data = form.serialize() + '&' + $.param(object)
    

    请参阅http://api.jquery.com/jQuery.param 以获取更多参考。

    【讨论】:

    • 我喜欢这个。这意味着我不必查看丑陋的查询字符串!
    • 到目前为止,这是更好的方法。接受的答案很混乱,不应该在任何生产应用程序中使用。
    • 如果我们谈论的是生产环境,那么这些答案都不应该使用。 form 应该包含所有信息(如有必要,在隐藏字段中),以便可以在单个调用中对其进行序列化。这样,如果 JS 被禁用或失败,表单提交仍应具有故障保护并在发送时包含所有数据。
    【解决方案3】:

    我不知道,但上述方法都不适合我,然后我使用了它并且它有效:

    在表单的序列化数组中存储为键值对

    我们在表单变量中推送了一个或多个新值,然后我们现在可以直接传递这个变量了。

    var form = $('form.sigPad').serializeArray();
    var uniquekey = {
          name: "uniquekey",
          value: $('#UniqueKey').val()
    };
    form.push(uniquekey);
    

    【讨论】:

      【解决方案4】:

      如果你想用表单序列化发送数据,你可以试试这个

      var form= $("#formId");
      $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize()+"&variable="+otherData,
          success: function (data) {
          var result=data;
          $('#result').attr("value",result);
      
          }
      });
      

      【讨论】:

        【解决方案5】:

        像这样传递参数的值

        data : $('#form_id').serialize() + "&parameter1=value1&parameter2=value2"
        

        等等。

        【讨论】:

          【解决方案6】:

          根据 Rory McCrossan 的回答,如果您想发送一个整数的 array(几乎适用于 .NET),代码如下:

          // ...
          
          url: "MyUrl",       //  For example --> @Url.Action("Method", "Controller")
          method: "post",
          traditional: true,  
          data: 
              $('#myForm').serialize() +
              "&param1="xxx" +
              "&param2="33" +
              "&" + $.param({ paramArray: ["1","2","3"]}, true)
          ,             
          
          // ...
          

          【讨论】:

            【解决方案7】:

            在 js 中编码:

              var temp =    $("#pay_property_amount").serialize();
                        temp = btoa(temp);
            

            并传入 ajax

             data: { temp_data : temp },
            

            在 php 中解码

                $temp_data = base64_decode($this->input->post('temp_data'));
            
             if($temp_data){
            $temp_data = $this->unserializeForm($temp_data);
             }
            
            
            function unserializeForm($str) {
            $returndata = array();
            $strArray = explode("&", $str);
            $i = 0;
            foreach ($strArray as $item) {
                $array = explode("=", $item);
                
                if (preg_match('/(%5B%5D)/', $array[0])) {
                      $array[0] = str_replace('%5B%5D','',$array[0]);
                      if(array_key_exists($array[0],$returndata)){
                              $returndata[$array[0]][]=$array[1];
                      }else{
                          $returndata[$array[0]] =array();
                          $returndata[$array[0]][]=$array[1];
                      }
                }else
                {
                    $returndata[$array[0]] = $array[1];
                }
                
                
            }
            
            return $returndata;
            }
            

            【讨论】:

              【解决方案8】:
              $("#add_form").submit(function(e) {
                  e.preventDefault();
                  var total_qty = $('#total_qty').text();
                  var total_amt = $('#total_amt').text();
                     
                  $("#add_btn").val('adding....');
                  $.ajax({
                      url: 'action.php',
                      method: 'post',
                      data: $(this).serialize() + "&total_qty="+total_qty + "&total_amt="+total_amt,
                      success: function(data){
                          console.log(data);
                      }   
                  });
              });
              

              【讨论】:

              • 您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。
              【解决方案9】:

              你也可以使用 serializeArray 函数来做同样的事情。

              【讨论】:

                【解决方案10】:

                您可以使用 jQuery 创建一个辅助表单,其中包含另一个表单的内容,然后添加该表单的其他参数,因此您只需在 ajax 调用中对其进行序列化。

                function createInput(name,value){
                    return $('<input>').attr({
                        name: name,
                        value: value
                    });
                }
                $form = $("<form></form>");
                $form.append($("#your_form input").clone());
                $form.append(createInput('input_name', 'input_value'));
                $form.append(createInput('input_name_2', 'input_value_2'));
                ....
                
                $.ajax({
                    type : 'POST',
                    url : 'url',
                    data : $form.serialize()
                }
                

                【讨论】:

                  【解决方案11】:

                  我用under语句解决了这个问题; 使用 url 相同的 GET 方法发送数据

                  $.ajax({
                      url: 'includes/get_ajax_function.php?value=jack&id='+id,
                      type: 'post',
                      data: $('#b-info1').serializeArray(),
                  

                  并通过$_REQUEST['value']$_GET['id'] 获得价值

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2013-10-02
                    • 2021-02-01
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多