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 个答案: