getting error in $.ajax call

Question

I have create a web API in C# and call that api from jquery but getting error:

('#buttonid').click(function (event) {
    $.ajax({
     method: "GET",url: "http://localhost:54580/api/persons",
     dataType: 'jsonp',
      beforeSend: function (request) {
                request.setRequestHeader("Authorization", "Negotiate");
            },
       async: true,
     success: function (data) {

     console.log(JSON.stringify(data));

    },
      error: function(jqXHR,error, errorThrown) {  
           if(jqXHR.status&&jqXHR.status==400){
                 console.log(jqXHR.responseText); 
           }else{
                console.log("Something went wrong");
           }
      }
}); 
});

in debug mode I am able to see my data.:

http://localhost:54580/api/persons?callback=jQuery111103874004708615564_1461475734608&_=1461475734609

The data is:

[{
    "FirstName": "Ramu",
    "LastName": "Rai",
    "Email": "test123"
}, {
    "FirstName": "Ramu1",
    "LastName": "Rai1",
    "Email": "test123"
}]

but code never goes in success section. it always print "Something went wrong"

Answer 1

Use json instead of jsonp , try demo below (replace url)

 $.ajax({ method: "GET", url: "http://jsonplaceholder.typicode.com/posts/1", //"http://localhost:54580/api/persons", beforeSend: function(request) { request.setRequestHeader("Authorization", "Negotiate"); }, success: function(data) { var result = JSON.stringify(data); var $result = document.querySelector('#pre'); $result.textContent = result; }, error: function(jqXHR, error, errorThrown) { if (jqXHR.status && jqXHR.status == 400) { console.log(jqXHR.responseText); } else { console.log("Something went wrong"); } } }); function my_function(data){ console.log('my_function', data); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre id="pre"></pre>