仅在刷新页面时才从jquerymobile上的MySQL获取数据

时间:2012-07-07 15:18:24

标签: mysql jquery-mobile getjson

好的,所以当我点击index.html中的搜索按钮时,我正在尝试加载数据并移动到另一个页面

这是我的搜索按钮

 <a href="results.html" data-role="button" data-icon="search"
 data-iconpos="notext">search</a>

当它正在加载时我希望页面运行此函数并获取数据

      $(function () { $.getJSON("API.php", {
         command: "getBusiness",
         orig_lat: myPos.lat,
         orig_long: myPos.lon, 
         distance: 0.05 },

      function (result) { 
         $("#locations").html("");
         for (var i = 0; i < result.length; i++) {
            $("<a href='business.html?ID=" + result[i].id + "&bsnName=" + "'>
            <div>" + result[i].bsnName + " " + (parseInt(result[i].distance * 1000))
            "</div></a>").appendTo("#locations");}});});

只有当我点击刷新时才会在没有数据库的情况下加载页面,它会显示结果

我不确定这里有什么问题,我不应该使用getJSON吗?我见过有人在谈论.Ajax()和getJSON()一样吗?

是否有更好的想法如何移动到另一个页面并同时从DB获取数据到您要在jquerymobile上加载的页面?

我尝试使用相同的功能使用onclick,当我给它一个div

头脑的其余部分

 <link rel="stylesheet" href="styles/jquery.mobile.structure-1.1.0.min.css" />
    <link rel="stylesheet" href="styles/jquery.mobile.theme-1.1.0.min.css" />
    <link rel="stylesheet" href="styles/my.css" />
    <script src="scripts/jquery-1.7.2.min.js"></script>
    <script src="scripts/jquery.mobile-1.1.0.min.js"></script>
    <script src="scripts/cordova-1.8.1.js"></script>

        <script>

            // Wait for Cordova to load
            //
            document.addEventListener("deviceready", onDeviceReady, false);

            var watchID = null;
            var myPos = { lat: 32.0791, lon: 34.8156 };

            // Cordova is ready
            //
            function onDeviceReady() {
                // Throw an error if no update is received every 30 seconds
                var options = { timeout: 10000 };
                watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
            }

            // onSuccess Geolocation
            //
            function onSuccess(position) {
                var element = document.getElementById('geolocation');
                //myPos.lat=position.coords.latitude;
                //myPos.lon=position.coords.longitude;     

                element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
                            'Longitude: ' + position.coords.longitude + '<br />' +
                            '<hr />' + element.innerHTML;
            }

            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
            }

1 个答案:

答案 0 :(得分:0)

基本上当jQuery mobile首先加载或索引页面时,它会加载整个头部(Javascript,CSS等)和body部分。但是当用户单击jQuery Mobile驱动的站点中的链接时,导航系统的默认行为是使用该链接的href来表示Ajax请求(而不是允许浏览器的默认链接行为请求具有完整页面加载的href当Ajax请求消失时,框架将接收其整个文本内容,但它只会注入响应的body元素的内容。

这个问题可以有多种解决方案,例如

  • 构建jQuery Mobile站点时最简单的方法是在每个页面的头部引用同一组样式表和脚本。

  • 在链接中使用属性data-ajax =“false”链接没有Ajax这个属性将加载没有ajax和动画的下一页,因此head和body部分都会加载。

  • 如果您需要加载特定页面的特定脚本或样式,建议将绑定逻辑添加到pageInit,例如“#aboutPage”是id =“aboutPage”属性。

     $( document ).delegate("#aboutPage", "pageinit", function() {
       //you can place your getJson script here. that will execute when page loads 
       alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
     });
    

因此,在您的情况下,更好的解决方案是将您的ajax调用或其他特定脚本与pageinit事件绑定。

您可以从这些jQuery Mobile文档页面获得帮助。

http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html

http://jquerymobile.com/demos/1.1.0/docs/pages/page-scripting.html