Passing of AJAX parameters

Question

Passing of AJAX parameters

Asked 7 years ago

Viewed 79 times

2

I am developing a web application and I am using AJAX and JSP I would like that when I register the client’s data send by parameter to another page the client’s name and email plus it sends with an error, it even sends the parameters but with these quotes ' ' '

HTML

<form >
 <div class="container-fluid">
 <div class="row">
 <div class="col-sm-6 col-md-4">
Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
</div>


 <div class="col-sm-6 col-md-4">

 CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
 </div>

  <div class="col-sm-6 col-md-4">
Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
 </div>

 <div class="col-sm-6 col-md-4">
CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
 </div>

 <div class="col-sm-6 col-md-4">
UF:<input type="text" id="uf" name="uf" ><br/><br/>
 </div>

 <div class="col-sm-6 col-md-4">
Cidade:<input type="text" id="cidade" name="uf"><br/><br/>
 </div>
</div>

  <div class="row">

    <div class="col-sm-6 col-md-4">
  Rua:<input type="text" id="rua" name="endereco"><br/><br/>
</div>

       <div class="col-sm-6 col-md-4">
  RG:<input type="text" id="rg" name="endereco"><br/><br/>
 </div>

     <div class="col-sm-6 col-md-4">
Bairro:<input type="text" id="bairro" name="endereco"><br/><br/>
   </div>
    <div class="col-sm-6 col-md-4">
Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
    </div>

    <div class="col-sm-6 col-md-4">
Login:<input type="text" id="login" name="login"><br/><br/>
    </div>

    <div class="col-sm-6 col-md-4">
        Senha:<input type="password" id="senha" name="senha"><br/><br/>
    </div>

    <div class="col-sm-6 col-md-4">
        Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
    </div>
    <div class="col-sm-6 col-md-4">
Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
  </div>

     <div class="col-sm-6 col-md-4">
    Email:<input type="text" id="email" name="email" ><br/><br/>
  </div>
        <div class="col-sm-6 col-md-4">
Estado Civil:  <label for="s1">Solteiro(a)</label>
    <input type="radio" id="solt" name="status"  value="solteiro"/>

    <label for="s2">Casado(a)</label>
    <input type="radio" id="estado_civil" name="status" value="casado"/><br/><br/>
        </div>

         <div class="col-sm-6 col-md-4">
Sexo:  <label for="s4">Masculino</label>
    <input type="radio" id="masc" name="sexo" value="masculino"/>

    <label for="s6">Feminino</label>
    <input type="radio" id="fem" name="sexo" value="feminino"/><br/><br/>

    </div>
</div>

    <button type="button" onclick="cadastrar()" >Cadastrar</button> 
</div>

</form>

AJAX

<script type="text/javascript">

   function cadastrar(){


       $.ajax({  
type: "POST",  
url: "CadastroCliente",  
 data: {
nome: $("input[id=nome]").val(),
cep: $("input[id=cep]").val(),
celular: $("input[id=nr_celular]").val(),

cpf: $("input[id=cpf]").val(),
uf: $("input[id=uf]").val(),

cidade: $("input[id=cidade]").val(),
rua: $("input[id=rua]").val(),
rg: $("input[id=rg]").val(),

bairro: $("input[id=bairro]").val(),
telefone: $("input[id=telefone]").val(),
login: $("input[id=login]").val(),
 senha: $("input[id=senha]").val(),
confirmar_senha: $("input[id=confirma_senha]").val(),
data_nascimento: $("input[id=nascimento_dt]").val(),
 estado_civil: $("input[name='status']:checked").val(),
 sexo: $("input[name='sexo']:checked").val(),
 email: $("input[id=email]").val(),

  },

  success: function(result){   
var email = $("input[id=email]").val();
 var nome= $("input[id=nome]").val();
 window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"'"+" nome='"+nome+"'";

 },
 error:function(){
  window.location.href = "erro.jsp";

    },
    });

   } 


</script>

Page error receiving parameters.

I could not identify which is the error on the page that receives the values. Can [Edit] the question and clarify better?

– Woss

2017/10/29 at 01:13
in case it was to appear the parameters and not with these quotes

– User1999

2017/10/29 at 01:36

2 answers

Browser other questions tagged java ajax java-ee servlet

You are not signed in. Login or sign up in order to post.

by luciano mallmann2 • 51 points · Answer 1 · 2017-10-31T11:46:58+00:00

<form id="form">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
            </div>


            <div class="col-sm-6 col-md-4">

                CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                UF:<input type="text" id="uf" name="uf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Cidade:<input type="text" id="cidade" name="uf"><br/><br/>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-6 col-md-4">
                Rua:<input type="text" id="rua" name="endereco"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                RG:<input type="text" id="rg" name="endereco"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Bairro:<input type="text" id="bairro" name="endereco"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Login:<input type="text" id="login" name="login"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Senha:<input type="password" id="senha" name="senha"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Email:<input type="text" id="email" name="email" ><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Estado Civil:  <label for="s1">Solteiro(a)</label>
                <input type="radio" id="solt" name="status"  value="solteiro"/>

                <label for="s2">Casado(a)</label>
                <input type="radio" id="estado_civil" name="status" value="casado"/><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Sexo:  <label for="s4">Masculino</label>
                <input type="radio" id="masc" name="sexo" value="masculino"/>

                <label for="s6">Feminino</label>
                <input type="radio" id="fem" name="sexo" value="feminino"/><br/><br/>

            </div>
        </div>

        <button type="button" onclick="cadastrar()" >Cadastrar</button> 
    </div>

</form>



<script type="text/javascript">

    function cadastrar() {


        $.ajax({
            type: "POST",
            url: "CadastroCliente",
            /* Use o serialize para pega todos os campos do form de id #form*/
            data: $("#fom").serialize(),
            /* Aqui no success o result no seu caso voce nao esta chamando ele em nada  */
            success: function (result) {

                /* Para chamar qualquer element com o id="tal" pode ser assim */
                var email = $("#email").val();
                var nome = $("#nome").val();
                /*E nao assim 
                 var nome = $("input[id=nome]").val();
                 */
                window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"&nome=" + nome + ";

            },
            error: function () {
                window.location.href = "erro.jsp";

            }
        });
    }


</script>

by Victor • **1,539** points · Answer 2 · 2017-10-31T12:19:48+00:00

You’re referencing it wrong, you actually have three ways to make these parameters work. Using name as selector, ID, or even defining a class. I will leave below the two most common forms first by name and then by ID, so you learn and never have a problem with it again.

Here below the way to reference using the name given in the input, note that I gave unique numbers for each input, already you in your question, is giving identical name to the fields City and UF, and also to the fields Street, RG and Neighborhood

<div>   
        <div class="col-sm-6 col-md-4">
            Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
        </div>


        <div class="col-sm-6 col-md-4">

            CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            UF:<input type="text" id="uf" name="uf" ><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Cidade:<input type="text" id="cidade" name="cidade"><br/><br/>
        </div>
    </div>

    <div class="row">

        <div class="col-sm-6 col-md-4">
            Rua:<input type="text" id="rua" name="rua"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            RG:<input type="text" id="rg" name="rg"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Bairro:<input type="text" id="bairro" name="bairro"><br/><br/>
        </div>
        <div class="col-sm-6 col-md-4">
            Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Login:<input type="text" id="login" name="login"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Senha:<input type="password" id="senha" name="senha"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
        </div>
        <div class="col-sm-6 col-md-4">
            Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
        </div>

        <div class="col-sm-6 col-md-4">
            Email:<input type="text" id="email" name="email" ><br/><br/>
        </div>
        <div class="col-sm-6 col-md-4">
            <label>Estado Civil:</label>
                <select name='status'>
                        <option value='solteiro'>Solteiro(a)</option>
                        <option value='casado'>Casado(a)<option>
                </select>
        </div>

        <div class="col-sm-6 col-md-4">
             <label>Sexo: </label>
                <select name='sexo'>
                        <option value='masculino'>Masculino</option>
                        <option value='feminino'>Feminino<option>
                </select>
        </div>
    </div>



<script type="text/javascript">

   function cadastrar(){


   $.ajax({  
    type: "POST",  
    url: "CadastroCliente",  
     data: {
        nome: $("input[name='nome']").val(),
        cep: $("input[name='cep']").val(),
        celular: $("input[name='celular']").val(),

        cpf: $("input[name='cpf']").val(),
        uf: $("input[name='uf']").val(),

        cidade: $("input[name='cidade']").val(),
        rua: $("input[name='rua']").val(),
        rg: $("input[name='rg']").val(),

        bairro: $("input[name='bairro']").val(),
        telefone: $("input[name='telefone']").val(),
        login: $("input[name='login']").val(),
        senha: $("input[name='senha']").val(),
        confirmar_senha: $("input[name='confirma_senha']").val(),
        data_nascimento: $("input[name='nascimento']").val(),
        email: $("input[name='email']").val(),
        estado_civil: $("select[name='status']").val(),
        sexo: $("select[name='sexo']").val(),
        

      },

      success: function(result){   
    var email = $("input[name='email']").val();
     var nome= $("input[name='nome']").val();
     window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"'"+" nome='"+nome+"'";

     },
     error:function(){
      window.location.href = "erro.jsp";

},
});
</script>

Here below is a way to reference by the id that is set in the input for the field.

<div>   
            <div class="col-sm-6 col-md-4">
                Nome Completo:<input type="text" id="nome" name="nome"><br/><br/>
            </div>


            <div class="col-sm-6 col-md-4">

                CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                UF:<input type="text" id="uf" name="uf" ><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Cidade:<input type="text" id="cidade" name="cidade"><br/><br/>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-6 col-md-4">
                Rua:<input type="text" id="rua" name="rua"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                RG:<input type="text" id="rg" name="rg"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Bairro:<input type="text" id="bairro" name="bairro"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Telefone:<input type="text" id="telefone" name="telefone"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Login:<input type="text" id="login" name="login"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Senha:<input type="password" id="senha" name="senha"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Confirmar Senha:<input type="password" id="confirma_senha" name="confirma_senha"><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
            </div>

            <div class="col-sm-6 col-md-4">
                Email:<input type="text" id="email" name="email" ><br/><br/>
            </div>
            <div class="col-sm-6 col-md-4">
                <label>Estado Civil:</label>
                    <select name='status' id='status'>
                            <option value='solteiro'>Solteiro(a)</option>
                            <option value='casado'>Casado(a)<option>
                    </select>
            </div>

            <div class="col-sm-6 col-md-4">
                 <label>Sexo: </label>
                    <select name='sexo' id='sexo'>
                            <option value='masculino'>Masculino</option>
                            <option value='feminino'>Feminino<option>
                    </select>
            </div>
        </div>



<script type="text/javascript">

   function cadastrar(){


       $.ajax({  
        type: "POST",  
        url: "CadastroCliente",  
         data: {
            nome: $("#nome").val(),
            cep: $("#cep").val(),
            celular: $("#nr_celular").val(),

            cpf: $("#cpf").val(),
            uf: $("#uf").val(),

            cidade: $("#cidade").val(),
            rua: $("#rua").val(),
            rg: $("#rg").val(),

            bairro: $("#bairro").val(),
            telefone: $("#telefone").val(),
            login: $("#login").val(),
            senha: $("#senha").val(),
            confirmar_senha: $("#confirma_senha").val(),
            data_nascimento: $("#nascimento_dt").val(),
            email: $("#email").val(),
            estado_civil: $("#status").val(),
            sexo: $("#sexo").val(),
            

          },

          success: function(result){   
        var email = $("#'email']").val();
         var nome= $("#'nome']").val();
         window.location.href = "ConfirmacaoCadastro.jsp?email="+email+"'"+" nome='"+nome+"'";

         },
         error:function(){
          window.location.href = "erro.jsp";

    },
    });
    </script>