To wrap the returned data in a callback function, it needs to make changes in the url.
URL before wrapping the data is:
[http://localhost:4148/EIS.svc/getShipment/json/data]
URL after wrapping the data in a callback function is:
[http://localhost:4148/EIS.svc/getShipment/json/data?callback=jsonpexp]
After making the above changes in the URL the returned data is as follows:
jsonpexp({"shipmentDetails":[{"Name":"AAA","Number":"123"},{"Name":"BBB","Number":"321"}]});
To use the returned json data in HTML page:
Make the following changes in javascript
function getShipment() {
$.ajax({
type: "GET",
dataType: 'jsonp',
contentType: "application/jsonp; charset=utf-8",
url: "http://localhost:4148/EIS.svc/getShipment/arun/arun?callback=jsonpexp",
jsonpCallback: 'jsonpexp',
success: function (data) {
var innerHtml = "";
document.getElementById('test').innerHTML=data.shipmentDetails[0].Name;;
//'test' is ID of <label1>
document.getElementById('testlab').innerHTML=data.shipmentDetails[0].Number;
//'testlab' is ID of <label2>
document.getElementById('test2').innerHTML=data.shipmentDetails[1].Name;;
//'test2' is ID of <label3>
document.getElementById('testlab2').innerHTML=data.shipmentDetails[1].Number;
//'testlab2' is ID of <label4>
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error while retrieval – " + XMLHttpRequest.responseText+":"+textStatus+":"+errorThrown);
}
});
}