仅在刷新页面时从jquerymobile上的MySQL获取数据 [英] getting data from MySQL on jquerymobile only when I refresh the page

问题描述

好，因此，当我单击index.html中的搜索按钮时，我试图加载数据并移至另一页

ok so I'm trying to load data and move to another page once I'm clicking on a search button in my index.html

这是我的搜索按钮

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

在加载时，我希望页面运行此功能并获取数据

and while it's loading I want the page to run this function and get data

      $(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");}});});

仅当我点击刷新时，页面才在没有数据库的情况下加载，向我显示结果

The page is loading without the DB only when I hit refresh it's showing me the result

我不确定这是怎么回事，我不应该使用getJSON吗?我见过有人在谈论.Ajax()与getJSON()一样吗?

I'm not sure what's wrong here, should I not use getJSON?? I have seen people talking about .Ajax() is it the same as getJSON() ?

关于如何移动到另一个页面并同时将数据从数据库捕获到要加载到jquerymobile的页面上，有更好的主意吗?

is there a better idea on how to move to another page and simultaneously grab data from DB to the page your going to load on jquerymobile?

我尝试使用与ondiv相同的功能，当我将其分配给div时，它起作用了

I tried to use the same function using onclick it worked when I gave it a 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');
            }

推荐答案

基本上，当jQuery mobile加载第一个页面或索引页面时，它会加载整个head部分(Javascript，CSS等)和body部分.但是，当用户单击jQuery Mobile驱动的网站中的链接时，导航系统的默认行为是使用该链接的href来制定Ajax请求(而不是允许浏览器的默认链接行为以全页加载的方式请求该href ).当该Ajax请求发出时，该框架将接收其全部文本内容，但只会注入响应的body元素的内容.

Basically when jQuery mobile loads first or index page it load whole head section (Javascript, CSS etc) and body section. but When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load).When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element.

例如，该问题可以有多种解决方案.

There can be multiple solutions to this problem e.g.

• 构建jQuery Mobile网站时，最简单的方法是在每个页面的开头引用相同的样式表和脚本集.

• The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page.

通过在链接中使用属性data-ajax ="false"进行不使用Ajax的链接，此属性将加载不包含ajax和动画的下一页，因此将同时加载head和body部分.

Linking without Ajax by using an attribute data-ajax="false" in your link this attribute will load the next page without ajax and animation so both head and body section would load.

如果需要为特定页面加载特定的脚本或样式，建议将逻辑绑定到pageInit，例如"#aboutPage"是id ="aboutPage"属性.

If you need to load in specific scripts or styles for a particular page, It is recommended binding logic to the pageInit e.g. "#aboutPage" is id="aboutPage" attribute .

 $( 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调用或其他Particuler脚本与pageinit事件绑定.

So in your case better solution is to bind your ajax call or other particuler script with pageinit event.

您可以从jQuery Mobile文档的以下页面获得帮助.

You can get help from these pages of jQuery Mobile documentation.

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

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

这篇关于仅在刷新页面时从jquerymobile上的MySQL获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！