Hello,
I am trying to get data from asp.net webservice to html.
Initially i have pre published webservice in my localhost, it returns a json formated string.
While retrieving json data from webservice, the browsers blocks response and shows a message:--->
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:55619/WebService_DataCounter.asmx/Indus_Gadget_Data. This can be fixed by moving the resource to the same domain or enabling CORS. Indus_Gadget_Data.....
here is my code in webservice
[WebMethod]
public DataTable Indus_Gadget_Data()
{
dt = new DataTable();
dt = process_indus_gadget_data.Indus_Gadget_Processing();
dt.TableName = "All Sites data";
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<overallstatics> details = new List<overallstatics>();
details.Clear();
if (dt.Rows.Count > 0 && dt != null)
{
foreach (DataRow dr in dt.Rows)
{
OverallStatics user = new OverallStatics();
user.SiteName = dr[0].ToString();
user.EB = dr[1].ToString();
user.DG = dr[2].ToString();
user.LS = dr[3].ToString();
user.DC = dr[4].ToString();
details.Add(user);
}
}
return serializer.Serialize(details);
}
now in html data retrieving
<script type="text/javascript">
document.onload = init();
function init() {
Get_Indus_Widget();
}
function Get_Indus_Widget() {
$.ajax({
type: "POST",
url: "http://192.168.0.108:55619/WebService_DataCounter.asmx/Indus_Gadget_Data",
data: "{}",
headers: { 'Access-Control-Allow-Origin': '*' },
crossDomain: true,
contentType: "application/json",
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
},
headers: {
'Access-Control-Allow-Origin': '*'},
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#tbDetails").append("<tr><td>" + data.d[i].SiteName + "</td><td>" + data.d[i].EB + "</td><td>" + data.d[i].DG + "</td><td>" + data.d[i].LS + "</td><td>" + data.d[i].DC + "</td></tr>");
}
},
error: function (result) {
alert("Error");
}
});
}
</script>