使用 PhoneGap、AJAX 和 JQuery Mobile 连接到 MySQL 数据库

Posted

技术标签:

【中文标题】使用 PhoneGap、AJAX 和 JQuery Mobile 连接到 MySQL 数据库【英文标题】:Connecting to a MySQL database using PhoneGap, AJAX, and JQuery Mobile 【发布时间】:2013-03-29 02:28:19 【问题描述】:

我在一个开发 android 应用程序的团队中,该应用程序很大程度上依赖于远程数据库的使用。我们正在使用 PhoneGap 和 Jquery Mobile,并且一直在尝试使用 AJAX 和 JSON 调用连接到我们的 mysql 数据库。目前,我们在测试阶段遇到了麻烦,即通过 MySQL Workbench 从 mySQL / 输入中拉出硬编码的“Ted”用户来验证我们是否有连接。

根据我们收集到的信息,数据传输的过程是这样的:

    在我们的 html 文件中,我们有一个

    <script type="text/javascript" src="Connect.js"></script>
    

    ^ 哪个应该运行 Connect.js 脚本,对吗?那么从那里开始运行 Connect.js?

    Connect.js 运行,将其连接到托管在外部 Web 服务上的 ServerFile.php,允许它运行 PHP 以连接到 MySQL 数据库并提取信息。

    //run the following code whenever a new pseudo-page is created
    $('#PAGENAME').live('pageshow', function(event)) 
    
        // cache this page for later use (inside the AJAX function)
        var $this = $(this);
    
        // make an AJAX call to your PHP script
        $.getJSON('http://www.WEBSITENAME.com/ServerFile.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');
        );
    );
    

这里是 ServerFile.php。这应该连接到 MySQL 数据库,生成 Select 语句,然后将输出发送到以 JSON 格式编码的浏览器。

<?php

//session_start();
$connection = mysql_connect("csmadison.dhcp.bsu.edu", "clbavender", "changeme"); 
$db = mysql_select_db("cs397_clbavender", $connection); 

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

//query your MySQL server for whatever information you want
$query = mysql_query("SELECT * FROM Users WHERE Username ='Ted'", $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));

?>

但这里没有显示任何内容。我们从这里做什么?

【问题讨论】:

您是否进行过任何调试以确定代码中的问题所在?我建议将echo json_encode(array('status' =&gt; 'success')); exit; 放在 ServerFile.php 的开头,以查看问题是否在于它在某个地方被 SQL 阻塞,或者是否在读取返回的内容时出现问题。 或者,另一种调试方法是将console.log(response); 放在 $.getJSON 函数中。然后响应将显示在您的 Firebug 中。 【参考方案1】:

第一件事。尝试确定问题出在哪里,服务器端还是客户端。

打印出您的数据库查询和编码的 json 会很有用。如果您正在创建一个简单的 API 服务,您应该可以使用浏览器输入 http://www.WEBSITENAME.com/ServerFile.php 并查看输出结果。

使用 echo 用 php 打印东西。

如果一切正常,是时候在 javascript 中打印您从服务器收到的响应,看看有什么问题。

使用console.log 用javascript 打印东西。日志应该出现在 eclipse 的 logcat 部分(因为您正在开发 android 应用程序)

【讨论】:

以上是关于使用 PhoneGap、AJAX 和 JQuery Mobile 连接到 MySQL 数据库的主要内容,如果未能解决你的问题,请参考以下文章

使用Phonegap的IOS上的Jquery ajax请求-Ajax不起作用

jQuery Mobile + Phonegap :: Ajax "Loading" gif 没有动画

windows phone 7 - phonegap 停止 jquery.ajax

在 PhoneGap+jQuery Mobile 中使用 ajax 的 CORS 无法在设备上运行,但在浏览器上运行

使用Phonegap Web应用程序在iOS上对Web的JQuery AJAX调用停止工作

Jquery ajax 不适用于 phonegap 应用程序