客户端:这是我的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−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>