[英]Connect PhoneGap App to MySql Database on the server with Angularjs and php?
Hi I'm trying to get data from a MySQL Database on my Server with a Phonegap App. 嗨,我正在尝试使用Phonegap应用程序从服务器上的MySQL数据库获取数据。 I'm calling a php file on the server wich is giving me back JSON. 我在服务器上调用一个php文件,这给了我JSON。 I'm trying to do a ajax call on that php file on the server and I want to save the json data in the $scope of angular so I can use it in my HTML. 我正在尝试对服务器上的php文件进行ajax调用,我想将json数据保存在angular的$ scope中,以便可以在HTML中使用它。 My script looks like this: 我的脚本如下所示:
function PostsCtrlAjax($scope, $http)
{
var output2 = $('#output2');
$.ajax({
url: 'http://myWebsiteMySQL.ch/landmarks.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$scope.posts = data;
},
error: function(){
output2.text('There was an error loading the data.');
}
});
}
</script>
then I want to access the $scope data in the html file like so: 那么我想像这样访问html文件中的$ scope数据:
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts" class='postBody'>
<div>{{post.id}}</div>
<div>{{post.name}}</div>
</div>
</div>
but I can't see any data. 但我看不到任何数据。 What am I doing wrong? 我究竟做错了什么? I'm thankful for any help. 感谢您的帮助。 I'm trying to solve this problem since 2 days. 自2天以来,我一直在努力解决此问题。
my php file on the server looks like this: 我在服务器上的php文件如下所示:
<?php
header('Content-type: application/json');
$server = "localhost";
$username = "xx";
$password = "xx";
$database = "xx";
$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);
$sql = "SELECT id, l_name AS name, l_lat AS latitude, l_long AS longitude, l_image AS bild FROM landmarks ORDER BY l_name";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());
$records = array();
while($row = mysql_fetch_assoc($result)) {
$records[] = $row;
}
mysql_close($con);
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
?>
the Data which is send back is this: 发送回的数据是这样的:
([{"id":"14","name":"Fashion_Coupons","latitude":"9.000000000000","longitude":"9.000000000000","bild":null},{"id":"13","name":"Travel_Coupons","latitude":"3.000000000000","longitude":"4.000000000000","bild":"TopTrendsProgressbar.png"},{"id":"31","name":"Travel_Coupons","latitude":"222.000000000000","longitude":"23212.000000000000","bild":null}]);
Add watch method for detecting change 'posts' in Your model, something like this: 添加监视方法以检测模型中的更改“帖子”,如下所示:
$scope.$watch('_rows', function() {
$scope.items = $scope.posts;
});
See this answer for how to do a JSONP request in angular. 有关如何在angular中执行JSONP请求的信息,请参见此答案。 AngularJS 1.2 cross origin requests are only supported for HTTP 仅HTTP支持AngularJS 1.2跨源请求
Note that the documentation says JSONP URLs must contain the string JSON_CALLBACK. 请注意,文档说JSONP URL必须包含字符串JSON_CALLBACK。 http://code.angularjs.org/1.1.5/docs/api/ng .$http#jsonp http://code.angularjs.org/1.1.5/docs/api/ng。$ http#jsonp
$http.jsonp('http://myWebsiteMySQL.ch/landmarks.php?callback=JSON_CALLBACK')
.success(function (data)
{
$scope.posts = data;
});
You can add an error callback to see if that contains any useful info. 您可以添加错误回调以查看其中是否包含任何有用的信息。 Chain a .error after the .success callback. 在.success回调之后链接一个.error。
$http.jsonp('http://myWebsiteMySQL.ch/landmarks.php')
.success(function (data) { ... })
.error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.