Necesito serializar todas las entradas de un formulario en una cadena JSON.
Con la ayuda de esta publicación, puedo crear con éxito una cadena válida como se muestra a continuación :

{"input01":"value01","input02":"value02","input03":"value03"}

Sin embargo, cuando trato de usar la cadena para POSTAR datos usando la función Ajax de jQuery, parece agregar barras diagonales inversas a la cadena, lo que hace que la cadena JSON se envíe usando GET en lugar de POST. La página PHP cargada devuelve una matriz $_GET de:

[{\"input01\":\"value01\",\"input02\":\"value02\",\"input03\":\"value03\"}] =>

He probado la cadena JSON usando alert() para confirmar que la estructura es correcta antes de usarla en la función AJAX.
Además, si solo escribo manualmente la cadena JSON válida, el AJAX publica los datos correctamente.

Mi código es el siguiente:

var dataJSON = $.toJSON($('#form').serializeObject());
alert(dataJSON);

$.ajax({
    type: "POST",
    url: "ajax.php",
    data: 'Query01=01&Query02=02',
    dataType: 'json',
    success: function(data){
       if (data==1){
         $('#wrap').load('ajax.php',dataJSON);
       }
    }
});
12
ticallian 14 oct. 2009 a las 16:15

5 respuestas

La mejor respuesta

Después de buscar en Google y el sitio jQuery, llegué a la conclusión personal de que la función $.load convertirá cualquier variable que se le pase como una cadena de consulta (como se describió anteriormente en mi problema original). Si desea pasar una cadena JSON a través de ella, debe escribirse manualmente.

Para evitar esto, utilicé la función de bajo nivel $.ajax en su lugar. Una ventaja de usar este método significaba que también podía enviar datos POST usando la función estándar .serialize() en lugar de tener que convertir mis datos de formulario a JSON.

Mi codigo final:

var formData = $('#form').serialize();

$.ajax({
     type: "POST",
     url: "ajax.php",
     data: 'Query01=01&Query02=02',
     dataType: 'json',
     success: function(data){
          if (data==1){
               $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: formData,
                    success: function(html){
                         $("#wrap").replaceWith(html);
                    }   
               });
          }
     }
});

Si alguien más tiene una solución, por favor comente.

1
ticallian 15 oct. 2009 a las 00:38
<html>
<head>
<script src="resources/jquery-2.1.0.js"></script>
<script src="resources/jquery.serializejson.min.js"></script>
</head>
<body>
  <script>

        $(document).ready(function(){

            $("#simplepost").click(function(e){

                var MyForm = $("#appForm").serializeJSON();
                console.log(MyForm);

            $.ajax(
                    {
                        url: "rest/emp/create",
                        type: "POST",
                        data: JSON.stringify(MyForm),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success:function(maindta){
                            alert(maindta);
                        },
                        error: function(jqXHR, testStatus, errorThrown){
                            alert(errorThrown);
                        }
                    });
            e.preventDefault(); //STOP default action
        });
    });
</script>
<h2>Hello World!</h2>
<form id="appForm" method="POST">
    EmployeeID:<input type="text" name='id' value="" />
    Employee Name:<input type="text" name="name" value=""/>
<br>
<input type="button" value="Submit" id="simplepost" />
</form>
</body>
</html>
-2
Nipa 10 oct. 2014 a las 23:29

Lo hice para que funcione con barras de tiras en el lado de php.

Algo como esto:

$data = json_decode(stripslashes($_POST['json_data']));
2
Yannis 25 dic. 2017 a las 13:58

Asegúrate de que

echo $_GET['varwithurl']

No

echo json_encode($_GET['varwithurl'])

Como lo hacen muchos ejemplos web de php.

Envío datos con url con $.ajax() y no veo barras invertidas no deseadas en el script php.

2
Benoit Garret 14 dic. 2011 a las 12:09

Este es el comportamiento predeterminado de $.ajax(). Puede cambiarlo configurando la opción processData en false. Consulte las opciones $.ajax().

data  Object, String

Datos a enviar al servidor. Se convierte en una cadena de consulta, si aún no es una cadena. Se adjunta a la url para las solicitudes GET. Consulte la opción processData para evitar este procesamiento automático. El objeto debe ser pares clave / valor. Si el valor es una matriz, jQuery serializa varios valores con la misma clave, es decir, {foo: ["bar1", "bar2"]} se convierte en '& foo = bar1 & foo = bar2'.

Y

processData   Boolean Default: true

Por defecto, los datos pasados a la opción de datos como un objeto (técnicamente, cualquier cosa que no sea una cadena) serán procesados y transformados en una cadena de consulta, que se ajusta al tipo de contenido predeterminado "application / x-www-form-urlencoded" . Si desea enviar DOMDocuments u otros datos no procesados, configure esta opción en falso.

11
cletus 14 oct. 2009 a las 12:21