phonegap ajax发布到服务器

The following code works in ripple and using fiddler I have tested the server service and it is working as intended. However, when I load the code up on an actual device it locks up.

Any help would be appreciated:

<div data-role="view" data-title="Home" data-layout="main" data-model="APP.models.home">
<h1 data-bind="html: title"></h1>
<p>Hello, your application is ready!</p>
<div id="btn_checkin" data-role="button" data-icon="action" class="km-large" style="width:90%;align-self:center;">Talk to server</div>
<div class="row">
    <div class="col s12 m6">
        <div class="card darken-1">
            <div class="card-content black-text">
                <span class="card-title black-text"></span>
                <p id="regId"></p>
            </div>
        </div>
    </div>
</div>

<div id="cards"></div><script>
    $(function () {
        var helloworld = {"hello":"hello"};

        var stringy = JSON.stringify(helloworld);
        function onClick(e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url: conn + "/CheckIn/Hello",
                data: stringy,
                success: function (data) {
                    var cards = document.getElementById("cards");
                    var push = '<div class="row">' +
                          '<div class="col s12 m6">' +
                          '  <div class="card darken-1">' +
                          '    <div class="card-content black-text">' +
                          '      <span class="card-title black-text">Hello</span>' +
                           '      <p>In Notification</p>' +
                          '      <p>' + data.world + '</p>' +
                          '    </div>' +
                          '  </div>' +
                          ' </div>' +
                          '</div>';
                    cards.innerHTML += push;

                },
                error: function (error) {
                    jsonValue = jQuery.parseJSON(error.responseText);
                    console.log(jsonValue);
                    var cards = document.getElementById("cards");
                    var push = '<div class="row">' +
                          '<div class="col s12 m6">' +
                          '  <div class="card darken-1">' +
                          '    <div class="card-content black-text">' +
                          '      <span class="card-title black-text">Hello</span>' +
                           '      <p>In Notification</p>' +
                          '      <p>' + jsonValue + '</p>' +
                          '    </div>' +
                          '  </div>' +
                          ' </div>' +
                          '</div>';
                    cards.innerHTML += push;
                }
            });
        };

        $('#btn_checkin').kendoMobileButton({ click: onClick });
    });
</script></div>

Thanks again.

Also, have confirmed device is on the same network as the server.

@shammon it is a hybrid app but am currently testing on android builds. Good catch on the error function, it was the end of a very long day. I corrected and updated the code.

 error: function (jqXHR, textStatus, errorThrown) {
            cards.innerHTML = '<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>';
        }

The resulting test confirmed what @jcesarmobile had suggested and it was a CSP issue.

I ended up doing the following with my CSP:

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self' 'unsafe-inline'  http://example.com data: gap: https://ssl.gstatic.com 'unsafe-eval'; 
      style-src 'self' 'unsafe-inline'; 
      media-src *">

which is a slight modification of the default policy.

I tried initially to use connect-src rather than tie 'example.com' to the default-src but when the app loaded it 'hung' on a odd looking 'loading spinner' (it looked like a white pause button on a small blue circle background and the vertical bars of the pause button where alternating growing/shrinking). So if anyone knows what that was please let me know. I think it was the app trying to talk to the server but I am not sure.

for anyone else who stumbles across this, take a look at: HTML5Rocks and Generate your own CSP