将数据库添加到 jquery 移动站点

Posted

技术标签:

【中文标题】将数据库添加到 jquery 移动站点【英文标题】:Adding a database to jquery mobile site 【发布时间】:2012-01-04 23:49:06 【问题描述】:

我对使用 jquery 和 jquery mobile 很陌生,但我想知道是否有一种简单的方法(或教程最好)将数据库(远程和本地)绑定到 jquery 移动站点(最好不使用 php) .

【问题讨论】:

【参考方案1】:

您可以通过 javascript 使用 html5 localStorage,这里有一个解释和一些教程链接:http://www.html5rocks.com/en/features/storage

...现在有几种技术允许应用程序将数据保存在 客户端设备...

如果您想与服务器交互,那么您将需要使用服务器端脚本语言。使用 AJAX 与您的服务器通信相当容易:

JS--

//run the following code whenever a new pseudo-page is created
$(document).delegate('[data-role="page"]', 'pagecreate', function () 

    //cache this page for later use (inside the AJAX function)
    var $this = $(this);

    //make an AJAX call to your PHP script
    $.getJSON('path_to/server/script.php', function (response) 

        //create a variable to hold the parsed output from the server
        var output = [];

        //if the PHP script returned a success
        if (response.status == 'success') 

            //iterate through the response rows
            for (var key in response.items) 

                 //add each response row to the output variable
                 output.push('<li>' + response.items[key] + '</li>');
            

        //if the PHP script returned an error
         else 

            //output an error message
            output.push('<li>No Data Found</li>');
        

        //append the output to the `data-role="content"` div on this page as a listview and trigger the `create` event on its parent to style the listview
        $this.children('[data-role="content"]').append('<ul data-role="listview">' + output.join('') + '</ul>').trigger('create');
    );
);

PHP--

<?php

//include your database connection code
include_once('database-connection.php');

//query your mysql server for whatever information you want
$query = mysql_query("SELCT * FROM fake_table WHERE fake_col='fake value'", $db) or trigger_error(mysql_error());

//create an output array
$output = array();

//if the MySQL query returned any results
if (mysql_affected_rows() > 0) 

    //iterate through the results of your query
    while ($row = mysql_fetch_assoc($query)) 

        //add the results of your query to the output variable
        $output[] = $row;
    

    //send your output to the browser encoded in the JSON format
    echo json_encode(array('status' => 'success', 'items' => $output));
 else 

    //if no records were found in the database then output an error message encoded in the JSON format
    echo json_encode(array('status' => 'error', 'items' => $output));

?>

您还可以将数据发送到您的 PHP 脚本并将其添加到数据库中。

以下是上面使用的函数的一些文档页面:

jQuery.getJSON():http://api.jquery.com/jquery.getjson

PHP json_encode(): http://www.php.net/json_encode

【讨论】:

【参考方案2】:

如果您想要一个数据库,移动浏览器中以 Web SQL Databases 的形式广泛支持 SQLLite,目前大多数 android 和 iPhone 设备都支持该数据库。

要查看工作示例,请查看以下链接:

http://desalasworks.com/html5-databases-on-iphone/

请注意,SQLLite 中可用的 SQL 语言比(我假设是)您的 MySQL 数据库更有限。您可以创建/删除表、选择、插入和更新,但会缺少一些更高级的操作。

【讨论】:

【参考方案3】:

使用http://westcoastlogic.com/lawnchair/ 它提供了多种存储方式,您实际上可以将所有适配器(如何存储的选项)按顺序排列,以便它选择浏览器上可用的第一个适配器。 无论你想使用localstorage还是sqlite,它都使用JSON格式,所以你只需要处理JSON数据。

【讨论】:

以上是关于将数据库添加到 jquery 移动站点的主要内容,如果未能解决你的问题,请参考以下文章

移动 wordpress 站点后无法访问此站点

为啥当我使用 jQuery 自定义插件将 src 添加到图像时,段落会向下移动?

Wordpress:将多站点从服务器移动到本地主机

如何向 Node / Express 站点添加代理?

仅在桌面站点上执行 jQuery - 不要在移动设备上执行 jQuery [重复]

如何将移动手势(例如触摸和滑动)添加到 React Bootstrap 轮播组件?