Cannot Call Ajax Method in Windows Phone 7 using PhoneGap

问题

I have made web based app using HTML5/Javascript/JqueryAjax. The hosted url is working fine but when i run it in windows phone 7 using phonegap 2.8.1, it does not run. It calls error function.

Here is my code:

<!DOCTYPE html>
<html lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <meta charset="utf-8">
        <title></title>
        <!-- CSS -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/style.css">     
        <script type="text/javascript" charset="utf-8" src="cordova-2.8.1.js"></script>
        <script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">

    document.addEventListener("deviceready", onDeviceReady, false);


    function signclick() {


        var validate = true;
        var usv = document.getElementById('username').value;
        var psv = document.getElementById('password').value;
        var emv = document.getElementById('email').value;
        if (usv == '') {
            if (psv != '') {
                document.getElementById('validatepass').innerHTML = "";
            }
            if (emv != '') {
                document.getElementById('validateemail').innerHTML = "";
            }
            document.getElementById('validateuser').innerHTML = " - Please Enter a User Name";
            validate = false;
        }
        if (emv == '') {
            if (usv != '') {
                document.getElementById('validateuser').innerHTML = "";
            }
            if (psv != '') {
                document.getElementById('validatepass').innerHTML = "";
            }
            document.getElementById('validateemail').innerHTML = " - Please Enter Email ID";
            validate = false;
        }
        if (psv == '') {
            if (usv != '') {
                document.getElementById('validateuser').innerHTML = "";
            }
            if (emv != '') {
                document.getElementById('validateemail').innerHTML = "";
            }
            document.getElementById('validatepass').innerHTML = " - Please Enter a Valid Password";
            validate = false;
        }
        if (usv != '' && psv != '' && emv != '') {
            document.getElementById('validateuser').innerHTML = "";
            document.getElementById('validateemail').innerHTML = "";
            document.getElementById('validatepass').innerHTML = "";
            var make = { "Email": emv, "Username": usv, "Password": psv };

            $.ajax({
                type: "POST",
                url: create_user,
                data: JSON.stringify(make),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    window.location = "Login.html";
                },
                error: function (error) {
                    $("#alert").show();
                    document.getElementById('alert').innerHTML = "<b>Connection Failed!</b> Please Check Your Configurations";
                }
            });
        }


    }


</script> 

    </head>

    <body>
<div class="container">
        <div class="header">

                <div class="row">
                    <div class="logo span4">
                    <a href="http://www.texpoglobal.com"><img src="assets/img/texpo.png" width="70" height="70" align="left" style="margin-left:15px;margin-top:8px;"/></a>

                    </div>
                    <div class="links span8">
                        <a class="home" href="index.html" rel="tooltip" data-placement="bottom" data-original-title="Home"></a>
                    </div>
                </div>
            </div>


        <div class="register-container container">
            <div class="row">

                <div class="register span6" style="min-width:230px;">
                    <form action="" method="post">
                        <h2>REGISTER TO <span class="red"><img src="assets/img/texpo2.png"  width="90px" height="60px" /> </span></h2>
                         <div id="alert" style="display:none;"class="alert alert-error"></div>
                        <label for="username">Username<span id="validateuser" class="valid" ></span></label>
                        <input type="text" id="username" name="username" placeholder="choose a username..." required>
                        <label for="email">Email<span id="validateemail" class="valid" ></span></label>
                        <input type="text" id="email" name="email" placeholder="enter your email..." required>
                        <label for="password">Password<span id="validatepass" class="valid" ></span></label>
                        <input type="password" id="password" name="password" placeholder="choose a password..." required>
                        <button type="button" onclick="signclick()" >REGISTER</button>


                    </form>
                </div>
            </div>
        </div>
</div>
        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/scripts.js"></script>
        <script src="assets/js/config.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>

</html>

I really don't know what is the problem. It works on Android but not on windows phone. Any help would be appreciated.

回答1:

PROBLEM SOLVED!!!!

I just had to add $.support.cors = true; before $.ajax call. The problem was I was posting information to a WebService from cross-platform.

Following is the code:

$.support.cors = true;
    $.ajax({
                    type: "POST",
                    url: create_user,
                    data: JSON.stringify(make),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        window.location = "Login.html";
                    },
                    error: function (error) {
                        $("#alert").show();
                        document.getElementById('alert').innerHTML = "<b>Connection Failed!</b> Please Check Your Configurations";
                    }
                });

I don't if that's good practice or not but it helped me. Have fun coding.

来源：https://stackoverflow.com/questions/17311973/cannot-call-ajax-method-in-windows-phone-7-using-phonegap

标签

jquery

ajax

cordova

windows-phone-7

phonegap