如何使用jquery ajax和JSON将运行Phonegap的设备与服务器连接 - How to connect a device running Phonegap with a server using jquery ajax and JSON?

客户端：这是我的index.html，它在我的Phonegap项目中。

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>Hello World</title>
    <script charset="utf&minus;8" type="text/javascript">
        function connect(e) {
            var term = {
                button: e
            };
            $.ajax({
                url: 'http://localhost/reply.php',
                type: 'POST',
                data: term,
                dataType: 'json',
                error: function(jqXHR, text_status, strError) {
                    alert("no connection");
                },
                timeout: 60000,
                success: function(data) {
                    $("#result").html("");
                    for (var i in data) {
                        $("#result").append("<li>" + data[i] + "</li>");
                    }
                }
            });
        }
    </script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</head>
<body>
    <center><b>Bikes or Cars</b>
    </center>
    <center>
        <input onclick="connect(this.value)" type="button" value="cars" />
    </center>
    <center>
        <input onclick="connect(this.value)" type="button" value="bikes" />
    </center>
    <center><b>Results</b>
    </center>
    <ul id="result"></ul>
</body>

这是我的服务器端（reply.php）

<?php
$choice =$_POST["button"];
$cars = array("Mercedes", "BMW" , "Ferrari");
$bikes = array("Ducaite", "Royal Enfield" , "Harley Davidson");
if($choice == "cars") print json_encode($cars);
else print json_encode($bikes);
?>

我的问题是，我没有得到结果。我尝试过：首先，运行phonegap项目（客户端）不是问题。然后，我在htdocs中放置了"reply.php"（使用XAMPP），apache也启动了，但我没有得到调用的结果。有人知道吗？

我会试试这个。。。。

function connect(e)
    {
      $.post('http://localhost/reply.php',{button:e},function(data){
        $("#result").html("");
         for(var i in data){
          $("#result").append("<li>"+data[i]+"</li>");
         }
      },"jsonp");
    }

但是，在这个脚本初始化之前，您似乎没有加载jquery？？Jquery需要在使用$.ajax或$.post之前加载。这可能是的问题

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
// Possibly put JQUERY HERE if its not included/referenced in any of the above js files
<script type="text/javascript">
    function connect(e) {
        $.post('http://localhost/reply.php',{button:e},function(data){
        $("#result").html("");
         for(var i in data){
          $("#result").append("<li>"+data[i]+"</li>");
         }
      },"jsonp");
    }
</script>

对于使用相同网络更改的本地测试

url: 'http://localhost/reply.php',

至：

url: 'http://YOUR_SERVER_IP_HERE/reply.php',

问题解决了，谢谢大家。我在模拟器和智能手机设备上都试过了，效果很好。

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello World</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
    app.initialize();
    </script>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script type="text/javascript">
    function connect(e) {
        $.post('http://www.indiageeks.in/tutorials/reply.php',{button:e},function(data){
        $("#result").html("");
         for(var i in data){
          $("#result").append("<li>"+data[i]+"</li>");
         }
      },"json");
    }
    </script>
    <script type="text/javascript" charset="utf-8">
    function onLoad() {
        document.addEventListener("online", onOnline, false);
        document.addEventListener("offline", onOffline, false);
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        console.log("onDeviceReady");
    }
    // Handle the online event
    //
    function onOnline() {
        console.log("onOnline");
    }
    function onOffline() {
        console.log("onOffline");
    }
    </script>
    </head>
    <body onload="onLoad()">
    <center><b>Bikes or Cars</b></center>
    <center><input onclick="connect(this.value)" type="button" value="cars" /></center>
    <center><input onclick="connect(this.value)" type="button" value="bikes" /></center>
    <center><b>Results</b></center>
    <center><ul id="result"></ul></center>
    </body>
</html>