$.Ajax and $.Post not working on dev environment - ajax

Question

I have a simple function that uses $.Ajax. It's working fine when I deploy the this page to my online website, but on my dev environment it doesn't work, but there is no error. I tried both $.Ajax and $.Post. both not working, but in the F12 profiler tool i see the traffic.
Any Idea?
Thanks.
<script >
function RunAjax()
{
alert("before post");
$.post("http://myshulmgr.com/GetData.asmx/GetEventMembers", { PID: "32", EventID: "8" },
function (data) {
alert("Data Loaded: " + data);
});
$.ajax({
type: "POST",
url: "http://myshulmgr.com/GetData.asmx/GetEventMembers",
//data: {PID: iPID, EventID: iEventID},
data: "{'PID': '" + 32
+ "','EventID': '" + 8 + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (jsonRes)
{
alert(jsonRes);
},
failure: function (msg)
{
alert(msg);
}
});
}

Answer 1

Look at your browser's error console. There should be an informative message there.
Your dev environment is probably not on the same domain as the endpoint you are calling, so the same-origin policy is preventing your script from retrieving results from it. Since this is supposed to be a dev environment, you should probably set up a copy of the GetData.asmx script in that environment, rather than calling the production endpoints, and reference it as /GetData.asmx (i.e, as a domain-relative path) in your script.

Answer 2

You cannot perform cross-domain request because of same origin policy.
In your console you can see that this is actually the source of your problem:
console says (Aborted), giving a CORS preflight initiatior, i.e you tried to perform an cross-domain request, but it was aborted due to security reasons.
The reason why it works on production and not on dev is because probably your production environment is in the same domain (myshulmgr.com) to which the request is addressed, while dev environment is not.