1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Coletar dados do HTML, Gerar JSON e enviar via JQuery para WS Restful

Ola amigos, estou tentando fazer um exemplo utilizando um HTML muito simples.

A ideia é, ao se clicar no botão submit, o Jquery pegara todos os campos preenchidos, montará o JSON e o JQuery irá fazer a chamada (POST) ao meu web Service.

A chamda ao WS é outra etapa, minha duvida mesmo está na geração do JSON que não estou conseguindo, sempre gera VAZIO.

Eis o código

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>
        $( document ).ready(function() {
            $("#formId").submit(function(e){
                e.preventDefault();

                //var data = {}
                var json = ConvertFormToJSON("#formId");
                var Form = this;

                alert(json );


                //Save Form Data........
                $.ajax({
                    cache: false,
                    url : 'http://uol.com.br/',
                    type: "POST",
                    dataType : "json",
                    data : json,
                    context : Form,
                    success : function(callback){
                        //Where $(this) => context == FORM
                        console.log(JSON.parse(callback));
                        $(this).html("Success!");
                    },
                    error : function(){
                        $(this).html("Error!");
                    }
                });
            });
        });


        function ConvertFormToJSON(form){
            console.log('ConvertFormToJSON invoked!');
            var array = jQuery(form).serializeArray();
            var json = {};

            jQuery.each(array, function() {
                json[this.name] = this.value || '';
            });

            console.log('JSON: '+json);
            return json;
        }
    </script>

</head>

<body>
    <form id="formId">
        <table>
            <tr> 
                <td>Nome:</td>
                <td><input type="text" size=100 id="inputNomeId" value="Alexandre" /></td>
            </tr>
            <tr> 
                <td>Email:</td>
                <td><input type="text" size=100 id="inputEmailId" value="xxxxxxx@gmail.com"/></td>
            </tr>
            <tr> 
                <td>CPF:</td>
                <td><input type="text" size=100 id="inputCpfId" value="123123123"/></td>
            </tr>
            <tr><td><input type="submit" value="Submit" /></td></tr>
        </table>
    </form>

</body>



</html>
  • Eu troquei a forma:

            $( document ).ready(function() {
    
                $( "form" ).submit(function( event ) {
                    var json = $( this ).serializeArray() ;
                    //console.log( $( this ).serializeArray() );
                    console.log(json);
                    event.preventDefault();
                });
            });
    alexandrenilton   09 de nov de 2015
  • hey little brother, try this before

    alert(json );

    and try to put a name tag on the ids of the HTML elements like the example below

    Nome: Email:
    Isaiasnas   09 de nov de 2015
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags jquery rest html javascript ou faça a sua própria pergunta.