Ajax 不能在 phonegap 上工作

Posted 2023-03-04

技术标签:

【中文标题】Ajax 不能在 phonegap 上工作【英文标题】：Ajax not working on phonegap 【发布时间】：2015-01-02 20:49:45 【问题描述】：

我正在从 phonegap 制作原生应用程序。

首先我在 mvc 中创建了 rest api，我的所有函数都返回 json 行为并允许获取。

然后我制作了一个像 index.html 这样的 html 文件，然后这个文件在 firefox 中运行并出现第三方跨域错误之类的错误，我已经修复了这个错误，在我的 web.config 中制作了一些代码，现在可以正常工作了我在浏览器中的 ajax 代码

然后这个 html 页面我是简单的复制粘贴到 eclips 并在模拟器中运行我的应用程序，看起来不错，但是 我的 ajax 调用总是错误。

我遵循如下步骤：

1) <access origin="*" /><access origin="http://www.testsite.com:8090/Controller/Actionname" /> 在 config.xml 文件中

2) <uses-permission android:name="android.permission.INTERNET" /> 在 androidMenifest.xml 文件中

但仍然 ajax 失败

HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Unable to zooming device-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<script src="js/jquery-2.1.1.min.js" ></script>
<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
<section id="login">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="form-wrap">
                <h1>Log in with your email account</h1>
                  <!--  <form role="form" action="javascript:;" method="post" id="login-form" autocomplete="off">-->
                        <div class="form-group">
                            <label for="email" class="sr-only">Email</label>
                            <input type="email" name="email" id="email" class="form-control" placeholder="somebody@example.com">
                        </div>
                        <div class="form-group">
                            <label for="key" class="sr-only">Password</label>
                            <input type="password" name="key" id="key" class="form-control" placeholder="Password">
                        </div>
                        <input type="button" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Log in">
                    <!--</form>-->
                    <a href="javascript:;" class="forget" data-toggle="modal" data-target=".forget-modal">Forgot your password?</a>
                    <hr>
                </div>
            </div> <!-- /.col-xs-12 -->
        </div> <!-- /.row -->
    </div> <!-- /.container -->
</section>


</body>

</html>

Ajax 代码如下：

<script charset="utf&minus;8" type="text/javascript">
$(document).bind("mobileinit", function() 
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
);

$(document).ready(function()
$("#btn-login").click(function()
var email = $("#email").val();
var pwd = $("#key").val();
var URL = "http://www.testsite.com:8090/Controller/ActionName?email=abc@abc.com&password=123123&apiToken=45retw54fgw45fgq345fg"; //iis url
var URL1 = "http://localhost:15536/Controller/ActionName?email=abc@abc.com&password=123123&apiToken=45retw54fgw45fgq345fg";

             $.ajax(
                url: URL,
                type:"POST",
                datatype:"json",
                success: function (data) 
                console.log(data.data);
                window.location.href="welcome.html";
                ,
                error : function(xhr, ajaxOptions, thrownError) 
                alert(xhr.status);
                alert(thrownError);
                
            );

);
);

</script>

【问题讨论】：

尝试在您的 ajax 调用之前放置一个日志/警报，以确保您的点击事件通过电子邮件和密码正确处理。顺便说一句，您应该使用 deviceready 事件来确保 cordova 已准备就绪 (cordova.apache.org/docs/en/4.0.0/…) 我确定我的 ajax 调用正在工作，因为我收到了这两个警报（xhr.status）；警报（抛出错误）；点击按钮后那你为什么不分享错误呢？因为我在警报中没有收到正确的错误。看到我的第一个警报显示“0”，第二个是空的，我认为在 phonegap 中的页面时无法检查控制台日志。您可以使用控制台插件检查带有phonegap的控制台日志。 【参考方案1】：

您得到的零是您的服务器响应代码。您的请求作为跨域请求被阻止。您的桌面浏览器允许这样做，但 phonegap 不允许。尝试使用 jsonp 和 ajax get 请求来解决这个跨域拒绝.. 修改它以满足您的需要并修改您的脚本以获取输入： $.ajax(timeout: 5000, url: 'http://yoursite.com/yourscript.php', dataType: "jsonp", callback: 'callback', jsonpCallback: 'yourcallback', type: "GET", crossDomain: true, data: 'scriptinput':'data string you send' ); function yourcallback(response) console.log(response); 请务必将您的响应包装为函数调用 yourcallback(yourjsonstring) 中的 json 字符串。这是一个示例，说明这如何在 PHP 的服务器端为我工作。希望您能从中了解如何修改您的 iis 服务器端脚本。

function SendAnswer($response)  
    // Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) 
        header("Access-Control-Allow-Origin: $_SERVER['HTTP_ORIGIN']");
        header('Access-Control-Allow-Credentials: true');
    
    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') 

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']");
    
    header("content-type: application/json");
    $callback = filter_input(INPUT_GET, 'callback', FILTER_SANITIZE_SPECIAL_CHARS);
    echo  "$callback(" . json_encode($response) . ")";

祝你好运。

【讨论】：

以上是关于Ajax 不能在 phonegap 上工作的主要内容，如果未能解决你的问题，请参考以下文章

Phonegap：ajax + jsonp 在 PC 上工作但在 Android 上不工作

使用 Phonegap、AJAX、PHP 和 mySQL 登录不工作

Phonegap Cordova Ajax 请求 404（未找到）错误

PhoneGap App 在模拟器上工作，但在 iPhone 设备上不能正常工作

插件不能在 Windows 上工作？为 phonegap 3.0 应用程序添加核心功能

Phonegap 3.6.3 ajax 不工作