無法使用ajax調用從服務器加載數據

Question

我對所有這些技術（php，knockout和ajax）都很陌生。

我正在嘗試從phpMyAdmin DB加載數據，但似乎未執行我的Ajax調用。 我的js中的loadData函數在HTML中調用，它控制UI中表格的可見性。 這意味着，只有當我從服務器獲取數據時，該表才可見。

我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script type='text/javascript' src='knockout-2.2.0.js'></script>

</head>
<body>
<div class="container" data-bind="load: loadData()">

  <table data-bind="visible: people().length > 0" class="students">
      <thead>
          <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Remove</th>
              <th>Update</th>
          </tr>
      </thead>
      <tbody data-bind="foreach: people">
          <tr>
              <td>
                  <span data-bind="text: name"></span>
              </td>
              <td>
                  <span data-bind="text: age"></span>
              </td>
          </tr>
      </tbody>
  </table>  
</div>
</body>
<script type='text/javascript' src='studentapp.js'></script>
</html>

JS

var personModel = function(id, name, age){
  var self = this; //caching so that it can be accessed later in a different context
  self.id = ko.observable(id); //unique id for the student (auto increment primary key from the database)
  self.name = ko.observable(name); //name of the student
  self.age = ko.observable(age);
};

var model = function () {
var self = this;
self.people = ko.observableArray([]);
    self.loadData = function () {
    //console.log("AHAHAHAH");
     // alert("super");
     //fetch existing student data from database$(document).ready(function() {
     $.getJSON("refresher_save.php", function(data) {
        for(var x in data){
          //student details
          var id = data[x]['id'];
          var name = data[x]['name'];
          var age = data[x]['age'];

          //push each of the student record to the observable array for 
          //storing student data
          self.people.push(new personModel(id, name, age)); 
        }
     });
};

};

ko.applyBindings(new model());

PHP

<?php
$db = new mysqli('localhost', 'root', '', 'student');

$action = (!empty($_POST['action'])) ? $_POST['action'] : ''; //action to be used(insert, delete, update, fetch)
$student = (!empty($_POST['student'])) ? $_POST['student'] : ''; //an array of the student details

//check if the student is not an empty string
//and assigns a value to $name and $age if its not empty
if(!empty($student)){
  $name = $student['name'];
  $age = $student['age'];    
}

switch($action){
    default:
              //only select student records which aren't deleted
              $students = $db->query("SELECT * FROM students WHERE status = 1");
              $students_r = array();

              while($row = $students->fetch_array()){

                  //default student data
                  $id = $row['id'];
                  $name = $row['name'];
                  $age = $row['age'];

                  //update status
                  //its false by default since
                  //this is only true if the user clicks
                  //on the span
                  $name_update = false;
                  $age_update = false;

                  //build the array that will store all the student records
                  $students_r[] = array(
                      'id' => $id, 'name' => $name, 'age' => $age
                      );
              }

              echo json_encode($students_r); //convert the array to JSON string
            break;
}
?>

有人可以幫忙嗎？

Answer 1

我認為這條線：

<div class="container" data-bind="load: loadData()">

應該這樣說：

<div class="container" data-bind="load: $root.loadData()">

為了證明這一點，在瀏覽器控制台中運行以下命令：

ko.contextFor(document.body).$root

您應該將視圖模型返回為可以在控制台中瀏覽的對象。

您可能還希望將Studentapp.js的導入移動到KO和JQuery導入下方的代碼頂部。

正如@ A.Wolff所建議的那樣，我會將您的代碼放入成功回調中。

而且，此代碼將不起作用，您需要引用您在循環中迭代的元素。

    <tbody data-bind="foreach: people">
      <tr>
          <td>
              <span data-bind="text: name"></span>
          </td>
          <td>
              <span data-bind="text: age"></span>
          </td>
      </tr>
  </tbody>

它應該是：

    <tbody data-bind="foreach: people">
      <tr>
          <td>
              <span data-bind="text: $data.name"></span>
          </td>
          <td>
              <span data-bind="text: $data.age"></span>
          </td>
      </tr>
  </tbody>

無法使用ajax調用從服務器加載數據

問題描述

1 個解決方案

解決方案1
0 2015-07-13 21:20:05

無法使用ajax調用從服務器加載數據

問題描述

1 個解決方案

解決方案1 0 2015-07-13 21:20:05

解決方案1
0 2015-07-13 21:20:05