$ (this) .serialize() - ¿Cómo agregar un valor?

Question

Actualmente tengo el siguiente:

$.ajax({ 
    type: 'POST', 
    url: this.action, 
    data: $(this).serialize(), 
}); 

Esto funciona bien, sin embargo, me gustaría añadir un valor a los datos, por lo que intentaron

$.ajax({ 
    type: 'POST', 
    url: this.action, 
    data: $(this).serialize() + '&=NonFormValue' + NonFormValue, 
}); 

Pero eso no le envió correctamente. ¿Alguna idea sobre cómo puede agregar un artículo a la cadena de serialización? Esta es una variable de página global que no es específica de un formulario.

Answer 1

En lugar de

data: $(this).serialize() + '&=NonFormValue' + NonFormValue, 

es probable que desee

data: $(this).serialize() + '&NonFormValue=' + NonFormValue, 

usted debe tener cuidado para cifrar la URL del valor de NonFormValue si puede contener caracteres especiales.

Answer 2

Añadir el elemento primero y luego serializar:

$.ajax({ 
    type: 'POST', 
    url: this.action, 
    data: $.extend($(this), {'NonFormValue': NonFormValue}).serialize() 
}); 

Answer 3

en primer lugar, no

data: $(this).serialize() + '&=NonFormValue' + NonFormValue, 

debe ser

data: $(this).serialize() + '&NonFormValue=' + NonFormValue, 

y en segundo lugar se puede utilizar

url: this.action + '?NonFormValue=' + NonFormValue, 

o si la acción ya contiene ningún parámetro

url: this.action + '&NonFormValue=' + NonFormValue, 

Answer 4

Si bien la respuesta de Matt B va a funcionar, también se puede utilizar .serializeArray() para obtener una matriz a partir de los datos del formulario, modificarlo, y utilizar jQuery.param() para convertirlo en una forma de codificación URL. De esta forma, jQuery maneja la serialización de sus datos adicionales por usted.

var data = $(this).serializeArray(); // convert form to array 
data.push({name: "NonFormValue", value: NonFormValue}); 
$.ajax({ 
    type: 'POST', 
    url: this.action, 
    data: $.param(data), 
}); 

Answer 5

No se olvide que siempre se puede hacer:

<input type="hidden" name="NonFormName" value="NonFormValue" /> 

en su forma actual, que puede ser mejor para su código dependiendo del caso.

Answer 6

Puede escribir una función adicional para procesar los datos del formulario y se debe añadir sus datos nonform como el Valu datos en el ejemplo form.seethe:

<form method="POST" id="add-form"> 
    <div class="form-group required "> 
     <label for="key">Enter key</label> 
     <input type="text" name="key" id="key" data-nonformdata="hai"/> 
    </div> 
    <div class="form-group required "> 
     <label for="name">Ente Name</label> 
     <input type="text" name="name" id="name" data-nonformdata="hello"/> 
    </div> 
    <input type="submit" id="add-formdata-btn" value="submit"> 
</form> 

A continuación, agregue este jQuery para el procesamiento de formularios

<script> 
$(document).onready(function(){ 
    $('#add-form').submit(function(event){ 
     event.preventDefault(); 
     var formData = $("form").serializeArray(); 
     formData = processFormData(formData); 
     // write further code here----> 
    }); 
}); 
processFormData(formData) 
{ 
    var data = formData; 
    data.forEach(function(object){ 
     $('#add-form input').each(function(){ 
      if(this.name == object.name){ 
       var nonformData = $(this).data("nonformdata"); 
       formData.push({name:this.name,value:nonformData}); 
      } 
     }); 
    }); 
    return formData; 
} 

Answer 7

podemos hacer como:

data = $form.serialize() + "&foo=bar"; 

Por ejemplo:

var userData = localStorage.getItem("userFormSerializeData"); 
var userId = localStorage.getItem("userId"); 

$.ajax({ 
    type: "POST", 
    url: postUrl, 
    data: $(form).serialize() + "&" + userData + "&userId=" + userId, 
    dataType: 'json', 
    success: function (response) { 
     //do something 
    } 
});