简体   繁体   English

如何使用AngularJS的几个ajax调用($ http)从单个php文件中请求数据?

[英]How to use AngularJS's several ajax call($http) to request data from a single php file?

I'm trying to use several AngularJS's ajax call to call a single php file to get different json data accordingly, below is my code: 我正在尝试使用几个AngularJS的ajax调用来调用单个php文件来相应地获取不同的json数据,以下是我的代码:

 var myApp = angular.module('myApp', []); myApp.controller('MyController', function($scope, $http) { $http.get('myphp.php',{key: "main1"}).then(function (response){ console.log(response); //do something }); $http.get('myphp.php',{key: "main2"}).then(function (response){ //do something }); }); 
 <html ng-app="myApp"> <header> <!-- AngularJS--> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> </header> <body> <div ng-controller="MyController"> <div id="main1"> </div> <div id="main2"> </div> </div> </body> </html> 

In myphp.php file I have: 在myphp.php文件中,我有:

 <?php if (isset($_GET["key"])) { if ($_GET["key"]=="main1") { $url1 = 'http://www.w3schools.com/angular/customers.php'; $content = file_get_contents($url1); echo $content; } else if ($_GET["key"]=="main2") { $url2 = "blabla" $content2 = file_get_contents($url2); echo $content2; } } ?> 

As you can see, I'm trying to differentiated different ajax calls and try to get correct data from the counterpart ajax call from php by sending a value while calling myphp.php. 如您所见,我正在尝试区分不同的ajax调用,并通过在调用myphp.php时发送值来尝试从php的对应ajax调用中获取正确的数据。

The problem is,,,,it won't work, I'm guessing that my syntax is messed up, can you guys help? 问题是,它不起作用,我猜我的语法搞砸了,你们能帮忙吗? Thank you so much in advance! 提前非常感谢您!

This is the result I got: 这是我得到的结果: 在此处输入图片说明

I add "var_dump($_GET);" 我添加“ var_dump($ _ GET);” at the top of my php code and this is what I got. 在我的php代码的顶部,这就是我得到的。 在此处输入图片说明

You have some errors in html and angular logic. 您在html和角度逻辑中有一些错误。

In html you declare your ng-app directive before load angular core 在html中,在加载角核之前声明ng-app指令

 <html >
<header>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
</header>
<body ng-app="myApp">
    <div ng-controller="MyController">
      <button ng-click="getContent('main1')"> main1</button>
      <button ng-click="getContent('main2')"> main2</button>
      <pre>{{content | json}}</pre>
    </div>
</body>
</html>

we already saw the logic errors in php :) 我们已经在php中看到了逻辑错误:)

<?php
if (isset($_GET["key"])) {
    if ($_GET["key"]=="main1")
        $url = 'http://www.w3schools.com/angular/customers.php';
    else if ($_GET["key"]=="main2")  
        $url = "https://www.google.com";

    $content = file_get_contents($url);
        echo $content;
}
?>

in angular you call twice the $http service without correct parameters. 角度而言,您两次调用$http服务而没有正确的参数。

var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope, $http) {


    $scope.getContent = function(key){
        $http.get('myphp.php',{params: {key: key}}).then(function (response){
        $scope.content = response.data;
    });
    }
 });

Nevermind folks, I solved it. 没关系,我解决了。 The syntax is wrong, it should be 语法错误,应该是

 $http.get(url, { params: { param1: value1, param2:value2, param3:value3...... } }); 

please refer to : http://tutorialsplane.com/angularjs-pass-data-to-http-get-request/ 请参考: http : //tutorialsplane.com/angularjs-pass-data-to-http-get-request/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM