JavaScript не может загрузить данные с сервера с помощью вызова AJAX

Question

JavaScript не может загрузить данные с сервера с помощью вызова AJAX

Я довольно новичок во всех этих технологиях (php, knockout и ajax).

Я пытаюсь загрузить данные из базы данных phpMyAdmin, но, похоже, мой AJAX
звонок не выполнен. Функция loadData в моем js вызывается в HTML
и он контролирует видимость таблицы в моем пользовательском интерфейсе. Значение
Таблица будет видна только тогда, когда я получу данные с сервера.

мой 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;
}
?>

Кто-нибудь может помочь?

2

ajax javascript jquery knockout.js php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я думаю, что эта строка:

<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>

0