Send JSON Javascript post method

Asked

Viewed 1,123 times

1

I have a Restful API written in Java, which has implemented GET and POST methods, tested the methods with the Postman application and are working.

Follows the class Filter

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    if (response instanceof HttpServletResponse) {
        HttpServletResponse http = (HttpServletResponse) response;
        http.addHeader("Access-Control-Allow-Origin", "*");
        http.addHeader("Access-Control-Allow-Credentials", "true");
        http.addHeader("Access-Control-Allow-Methods","GET, POST, DELETE, PUT");
        //http.addHeader("Access-Control-Allow-Methods","GET, POST");
        http.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        http.setCharacterEncoding("utf-8"); // configurando o charset para evitar caracteres doidos
    }
    chain.doFilter(request, response);
}

GET and POST Methods

@GET
@Path("/verificaCadastroExistente")
@Produces("application/json")
public EvpessTO verificaCadastroExistente(@QueryParam("cpf") String cpf) throws ServiceException{       
    System.out.println(cpf);
    return new EvpessTO();
}

@POST
@Path("/adicionaPessoa")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public EvpessTO adicionaPessoa(EvpessTO pto) throws ServiceException{

    System.out.println("adiciona pessoa " + pto.getNome());
    return new EvpessTO();
}

But when I try to call the POST method by index.html it does not arrive in my Restful.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>    

    <script>        
        function handleForm(arr) {              
            var obj = {};
            var elements = arr;
            for( var i = 0; i < elements.length; ++i ) {
                var element = elements[i];
                var name = element.name;
                var value = element.value;

                if( name ) {
                    obj[ name ] = value;
                }
            }
            var data = JSON.stringify(obj);             
            var xhr = new XMLHttpRequest();
            var url = "http://localhost:8081/EV-Restful/pessoas/adicionaPessoa";
            xhr.open("POST", url, true);
            xhr.setRequestHeader('Content-type','application/json; charset=utf-8');             
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var json = JSON.parse(xhr.responseText);
                    alert("if var json");
                }
            };              
            xhr.onload = function () {              
                var users = JSON.parse(xhr.responseText);
                if (xhr.readyState == 4 && xhr.status == "201") {
                    console.table(users);
                } else {
                    console.error(users);
                }
            }

            xhr.send(data);

            return JSON.stringify( obj );
        }
    </script>

</head> 
<body>      
    <div id="div2">
        <table style="z-index: 500">                
            <form onsubmit="handleForm(this)" >             
                <tr>
                    <td>Cadastro: <input type="date" id="pessdtcad" name="pessdtcad" style="text-transform:uppercase" placeholder="Digite data cadastro..."/></td>
                    <td>Nascimento: <input type="date" id="dataNascimento" name="dataNascimento" style="text-transform:uppercase" placeholder="Digite data nascimento..."/></td>
                </tr>                   
                <tr><td>Nome: <input type="text" id="nome" name="nome" style="text-transform:uppercase" placeholder="Digite nome..."/></td></tr>                    
                <tr>
                    <td>Sexo: <input type="text" id="sexo" name="sexo" style="text-transform:uppercase" placeholder="Digite sexo..."/></td>
                    <td>Escolaridade: <input type="text" id="escolaridade" name="escolaridade" style="text-transform:uppercase" placeholder="Digite escolaridade..."/></td>
                </tr>                   
                <tr>
                    <td>CPF: <input type="text" id="cpf" name="cpf" style="text-transform:uppercase" placeholder="Digite CPF..."/></td>
                    <td>CNPJ: <input type="text" id="cnpj" name="cnpj" style="text-transform:uppercase" placeholder="Digite CNPJ..."/></td>
                    <td>Cadsus: <input type="text" id="cadsus" name="cadsus" style="text-transform:uppercase" placeholder="Digite Cadsus..."/></td>
                </tr>                                                                               
                <tr>
                    <td>Celular: <input type="text" id="telcelular" name="telcelular" style="text-transform:uppercase" placeholder="Digite telefone celular..."/></td>
                    <td>Email: <input type="email" id="email" name="email" style="text-transform:lowercase" placeholder="Digite email..."/></td>
                </tr>                                       
                <tr>
                    <td>Logradouro: <input type="text" id="logradouro" name="logradouro" style="text-transform:uppercase" placeholder="Digite logradouro..."/></td>
                    <td>Numero: <input type="text" id="numero" name="numero" style="text-transform:uppercase" placeholder="Digite numero..."/></td>
                </tr>                   
                <tr>
                    <td>Complemento: <input type="text" id="complemento" name="complemento" style="text-transform:uppercase" placeholder="Digite complemento..."/></td>
                    <td>Bairro: <input type="text" id="bairro" name="bairro" style="text-transform:uppercase" placeholder="Digite bairro..."/></td>
                    <td>Cidade: <input type="text" id="cidade" name="cidade" style="text-transform:uppercase" placeholder="Digite cidade..."/></td>
                </tr>                   
                <tr>
                    <td>Distrito: <input type="text" id="distrito" name="distrito" style="text-transform:uppercase" placeholder="Digite distrito..."/></td>
                    <td>UF: <input type="text" id="uf" name="uf" style="text-transform:uppercase" placeholder="Digite estado..."/></td>
                    <td>CEP: <input type="text" id="cep" name="cep" style="text-transform:uppercase" placeholder="Digite CEP..."/></td>
                </tr>                   
                <tr>
                    <td>Deficiente: <input type="checkbox" id="deficiente" name="deficiente" value="true"/></td>
                    <td>Acessibilidade: <input type="checkbox" id="acessibilidade" name="acessibilidade" value="true"/></td>
                    <td>Tipo Acessibilidade: <input type="text" id="tipoAcessibilidade" name="tipoAcessibilidade" style="text-transform:uppercase" placeholder="Digite tipo acessibilidade..."/></td>
                </tr>                                                       
                <tr><td><input type="submit" value="Send" /></td></tr>
            </form>                                             
        </table>            
    </div>  
</body>
</html>

Someone’s been there and could help me?

  • She’s at door 8081

  • Marcelo, I created an index.html file and am running it through Chrome, without being on a server (toncat, glassfish, etc...) You know how I would change this property for this case?

  • yes, I’m auditioning to see if my backend is working

  • worked no, still no access to Restful

  • Nothing appears

  • I fixed the problem Marcelo, your tip was very important!!! It was because I was running the html file by browser. I inserted html into Tomcat and it worked

Show 1 more comment
No answers

Browser other questions tagged

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