Question

我有几个我正在使用的文件需要AJAX调用。我有dashboad.html来托管主界面。然后我有一个leads.php文件，它将leadsData.php中的信息呈现为一个漂亮的Bootstrap表。 leadsData.php返回一个JSON文件。

当我点击“准学生”时，会发生正确的事情......它会在主leads.php中呈现dashboard.html。问题是，在leads.php中呈现dashboard.html时，它无法从leadsData.php获取信息。经过一番思考后，这是有道理的......没有一个AJAX调用要求leads.php从leadsData.php获取信息。

|dashboard.html| AJAX --> |leads.php| AJAX --> |leadsData.php|

所以似乎第一个AJAX发生了，但第二个没有。

以下是我的代码：

dashboard.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>

</head>


<div ng-app="myApp" ng-controller="myController">

  <div class="row">

    <div class="col-lg-2">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Dashboard</a>
        </li>
        <li class="nav-item" ng-click = "LoadProspectiveStudents()">
          <a class="nav-link active"  href="#">Prospective Students</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>


    <div class="col-lg-10" style="border: solid;">
      <div class="container">
        <h1>MAIN CONTAINER</h1>
        <p ng-bind-html = "myResponse"></p>
      </div>
    </div>
  </div>

  <body>


  </body>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="dashboardController.js"></script>

</html>

leads.php

       <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

      </head>
      <body>

        <div ng-app = "myApp" ng-controller = "myCtrl">

          <!-- <textarea name="name" ng-model = "test"></textarea> -->

          <h1>Hi Mustafa</h1>

          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" ng-model= "test">
          </div>

          <table class="table">
            <thead>
              <tr>
                <th ng-click = "sortBy('first_name')">First Name</th>
                <th ng-click = "sortBy('last_name')">Last Name</th>
                <th ng-click = "sortBy('communityCollege')">Community College</th>
                <th ng-click = "sortBy('accountCreation')">Account Creation</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat = "user in myData | filter : test">
                <td> {{user.first_name}} </td>
                <td> {{user.last_name}} </td>
                <td> {{user.communityCollege}} </td>
                <td> {{user.accountCreation}}</td>
                <td>
                  <button type="button" class="btn btn-primary">View More</button>
                </td>
              </tr>
            </tbody>
          </table>

        </div>
        <script src="./leadsController.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
      </body>
    </html>

dashboardController.js

var app = angular.module('myApp', ['ngSanitize']);

app.controller('myController', function($scope, $http, $timeout) {

  // $scope.myResponse = "Mustafa Hoda";

  // $timeout(LoadProspectiveStudents(), 3000);


  //Load Prospective Students
  $scope.LoadProspectiveStudents = function(){
    $http.get("leads.php")
    .then(function(response) {
      $scope.myResponse = response.data;
      // $scope.renderedResponse = $parse($scope.myResponse);
      // $scope.myResponse = "Mustafa Hoda";
    }, function(response){
      $scope.myResponse = "Uh oh! Something went wrong";
    });



  }
});

嵌套的AJAX调用帮助Angular JS

0 个答案: