Consume Webservice from an external link

Question

While consuming a webservice an external URL via the link in the browser http://api.postmon.com.br/v1/cep/30640-240 returns the following JSON message:

{"complement": "from 9201 to the end - u00edmpar side (even side belongs a(o) Contagem)", "bairro": "Barreiro", "cidade": "Belo Horizonte", "patio": "Avenida Teresa Cristina", "estado_info": {"area_km2": "586.522,122", "codigo_ibge": "31", "name": "Minas Gerais"}, "cep": "30640240", "city_info": {"area_km2": "331,401", "codigo_ibge": "3106200"}, "status": "MG"}

How I can recover this data?

I’ve been using the Code:

<asp:TextBox ID="txtCep" runat="server"></asp:TextBox>
    <asp:Button OnClientClick="buscarCep();" ID="btnCep" runat="server" />

    <script type="text/javascript">
        function buscarCep() {
            var cep = $("#<%=txtCep.ClientID%>").val();
            var url = "http://api.postmon.com.br/v1/cep/" + cep;
            $.ajax({
                url: url,
                data: "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var dados = JSON.parse(data.d);

                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        }
    </script>

More has generated me the following error.

Xmlhttprequest cannot load http://api.postmon.com.br/v1/cep/30640-240. In the 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'http://localhost:50553' is therefore not allowed access. The Response had HTTP status code 405.

Answer 1

Friend, try to add the jQuery library to your code

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

That’s because the signal $. is a jQuery command, so it was giving error in its code

It worked here! However I was not allowed to receive the data, maybe you have this permission.

If it gives the same error with you! Try to use my code below, no error!

$.getJSON("http://republicavirtual.com.br/web_cep.php",{"cep" : cep, "formato" : "json"}, function(result){
            //Se deu certo
            if (result['resultado']){
                $("#uf").val(result["uf"]);
                $("#cidade").val(result["cidade"]);
                $("#bairro").val(result["bairro"]);
                $("#logradouro").val(result['tipo_logradouro'] +" "+ result['logradouro'])
                $("#numero").focus();
            }
        });

I hope I’ve helped! =)

Answer 2

Try it this way:

  
    function buscarCep() {
    var cep = $("#txtCep").val();
    var url = "http://api.postmon.com.br/v1/cep/" + cep;
    $.getJSON(url,function(data){
        console.log(data);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" onclick="buscarCep()">Buscar Cep</button>
    <input type="text" id="txtCep" />

There are some answers here explaining the reason for this.

Browsers have something called "same domain policy", which, briefly, means that the browser will only upload files via Xmlhttprequest if the destination is in exactly the same domain as the source (listed in the browser’s address bar).

Response link: /a/4762/4533