【问题标题】:PhoneGap (Cordova.js) and JQuery.Ajax not working togetherPhoneGap (Cordova.js) 和 JQuery.Ajax 不能一起工作
【发布时间】:2015-01-20 00:35:04
【问题描述】:

我使用 Phonegap+Jquery 构建了一个针对 Andriod 4.12 的 html 页面。

我的业务需求是使用 cordova.js 的相机 API 拍摄一张照片,然后将这张拍摄的照片发布到 ASMX 网络服务。

问题:当我添加对 Cordova.js 的引用并运行应用程序时,我在 LogCat “未捕获的 ReferenceError:$ 未定义”中收到错误,但如果我删除对 cordova.js 的引用,一切正常,我能够将数据发布到网络服务。

我附上我的代码以供参考。

<!DOCTYPE html>
<html>  
<head>    
<title>Capture Photo</title>   
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script> 

<script type="text/javascript">

 var varType;
 var varUrl;
 var varData;
 var varContentType;
 var varDataType;
 var varProcessData;

  function InsertDetails() {
        alert('Inserting Details');
        varType = "POST";
        varUrl = "http://mobile.comp.com/service/userservice.asmx/InsertDetails";
        varContentType = "application/json; charset=utf-8";
        varDataType = "json";
        varProcessData = true;

        var uname = document.getElementById('txtname');
        var pwd = document.getElementById('txtpwd');
        CallService(uname.value, pwd.value);

        return true;
    }

    //Generic function to call AXMX/WCF  Service        
    function CallService(u, p) {
        $.ajax({ type: varType, url: varUrl, data: '{"username":"' + u + '","password":"' + p + '"}', contentType: varContentType, dataType: varDataType, processdata: varProcessData, success: function (msg) { ServiceSucceeded(msg); }, error: ServiceFailed });
    }

    function ServiceSucceeded(result) {

        var myObject = eval('(' + result.d + ')');
        alert(myObject);
    }
    function ServiceFailed(result) {
        alert('Service call failed: ' + result.status + '' + result.statusText);
        varType = null; varUrl = null; varData = null; varContentType = null; varDataType = null; varProcessData = null;
    } 
</script>
</head>
<body>
<input type=text id=txtname value=John />
<input type=text id=txtpwd value=Doe /> 
<input type="button" id="btnSearch" onclick="InsertDetails();" style="cursor: pointer;
    margin-top: 8px; vertical-align: top" value="Insert Details" />

     <button id=btn1>Capture Photo</button> 

</body>
</html>

请帮帮我。

【问题讨论】:

    标签: jquery cordova


    【解决方案1】:

    对类似问题进行一些搜索会显示一些可能的答案。

    1) 在本地而不是从 CDN 加载 jQuery。您似乎已经这样做了,但我会为其他有类似问题的人提及。

    can't find jQuery's $ on asus tablet with android 3.2

    2) 告诉 jQuery 允许跨域请求。查看下面链接中的“$.support.cors”和“$.mobile.allowCrossDomainPages”部分。

    https://demos.jquerymobile.com/1.2.0/docs/pages/phonegap.html

    3) 告诉 jQuery 玩得好。可能是 cordova.js 正在使用另一个想要使用 $ 的 JS 库。由于您首先加载了cordova,因此另一个JS库在jQuery可以之前声明了g $。

    http://docs.jquery.com/Using_jQuery_with_Other_Libraries

    【讨论】:

      【解决方案2】:

      感谢尼克的帮助。第三个链接有帮助

      我的代码终于成功了

      我添加了以下代码行,它为我带来了魔力。

      jQuery.noConflict();
      

      JQuery 在那之后得到了认可。确保遵循正确的 javascript 顺序,否则代码将无法工作。

      我引用js文件的顺序:

      1. 对 JQuery.js 的引用(本地添加到项目中)
      2. jQuery.noConflict();
      3. 服务调用的Javascript代码
      4. 对 Cordova.js 的引用
      5. Cordova 相机交互代码

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-01-07
        • 2019-08-17
        • 2016-11-23
        • 2019-02-18
        相关资源
        最近更新 更多