【发布时间】：2016-07-02 16:27:24
【问题描述】：
下午好，
基本上，我正在尝试改编来自 http://blog.codebusters.pl/en/entry/ajax-auto-refresh-volume-ii 的 Eliza Witkowska 的精彩脚本，但我正在苦苦挣扎，因此我今天在 stackoverflow 上发帖。
在我的 html 文件中，我有 3 个复选框（chk1、chk2 和 chk3）。我想要的是通过链接其 Technical_name_html 从 mysql 表 'tbl_prototype' 中检索它们的值并更新 3 个复选框，如下所示：
a) if the value is *100* -> check the tickbox
b) if the value is *0* -> uncheck the tickbox
我正在尝试使用可以做到这一点的 ajax 查询，但我不太确定从哪里开始。
你对我有什么建议，让我可以继续这个好项目吗？
我可以回答任何问题。
非常感谢您的帮助，祝您有美好的一天。 洛朗
我的文件“index.html”的内容
<?php require('common.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo for Ajax Auto Refresh</title>
<link rel="stylesheet" type="text/css" href="css/mystyle_day.css" />
<script src="jquery-2.1.3.min.js"></script>
<script>
/* AJAX request to checker */
function check(){
$.ajax({
type: 'POST',
url: 'checker.php',
dataType: 'json',
data: {
counter:$('#message-list').data('counter')
}
}).done(function( response ) {
/* update counter */
$('#message-list').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#message-list').html(response.news);
}
});
}
//Every 1/2 sec check if there is new update
setInterval(check,500);
</script>
</head>
<body>
<h1>This is a demo for post <a href="http://blog.codebusters.pl/en/entry/ajax-auto-refresh-volume-ii">Ajax Auto Refresh - Volume II</a></h1>
<?php /* Our message container. data-counter should contain initial value of couner from database */ ?>
<div id="message-list" data-counter="<?php echo (int)$db->check_changes();?>">
<?php echo $db->get_news();?>
</div>
<input type="checkbox" name="chk1" value="chk1"> Living room<br>
<input type="checkbox" name="chk2" value="chk2"> Entrance<br>
<input type="checkbox" name="chk3" value="chk3"> Kitchen<br>
</body>
</html>
在 mySQL 数据库中生成表和一些数据的脚本：
CREATE TABLE `tbl_prototype` (
`id_component` int(11) NOT NULL,
`technical_name_html` varchar(10) NOT NULL,
`component_name` varchar(20) NOT NULL,
`description` varchar(50) NOT NULL,
`value` tinyint(3) UNSIGNED NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `tbl_prototype` (`id_component`, `technical_name_html`, `component_name`, `description`, `value`) VALUES
(1, 'chk1', 'light_living_room', 'The light of the living room', 0),
(2, 'chk2', 'light_entrance', 'The light of the entrance', 100),
(3, 'chk3', 'light_kitchen', 'The light of the kitchen', 0);
ALTER TABLE `tbl_prototype`
ADD PRIMARY KEY (`id_component`);
ALTER TABLE `tbl_prototype`
MODIFY `id_component` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
我的 PHP 文件“checker.php”的内容：
<?php require('common.php');
//get current counter
$data['current'] = (int)$db->check_changes();
//set initial value of update to false
$data['update'] = false;
//check if it's ajax call with POST containing current (for user) counter;
//and check if that counter is diffrent from the one in database
if(isset($_POST) && !empty($_POST['counter']) && (int)$_POST['counter']! =$data['current']){
//the counters are diffrent so get new message list
$data['news'] = '<h1>OMG! It\'s alive!!! NEW UPDATE !!!</h1>';
$data['news'] .= $db->get_news();
$data['update'] = true;
}
//just echo as JSON
echo json_encode($data);
/* End of file checker.php */
我的 PHP 文件 'common.php' 的内容：
<?php
require_once ('db.php'); //get our database class
$db = new db();
/* end of file common.php */
我的 PHP 文件 'db.php' 的内容：
<?php
/**
* Class db for Ajax Auto Refresh - Volume II - demo
*
* @author Eliza Witkowska <kokers@codebusters.pl>
* @link http://blog.codebusters.pl/en/entry/ajax-auto-refresh-volume-ii
*/
class db{
/**
* db
*
* @var $ public $db;
*/
public $db;
/**
* __construct
*
* @return void
*/
function __construct(){
$this->db_connect('192.168.0.XY',user','1234','database');
}
/**
* db_connect
*
* Connect with database
*
* @param mixed $host
* @param mixed $user
* @param mixed $pass
* @param mixed $database
* @return void
*/
function db_connect($host,$user,$pass,$database){
$this->db = new mysqli($host, $user, $pass, $database);
if($this->db->connect_errno > 0){
die('Unable to connect to database [' . $this->db->connect_error . ']');
}
}
/**
* check_changes
*
* Get counter value from database
*
* @return void
*/
function check_changes(){
$result = $this->db->query('SELECT counting FROM news WHERE id=1');
if($result = $result->fetch_object()){
return $result->counting;
}
return 0;
}
/**
* register_changes
*
* Increase value of counter in database. Should be called everytime when
* something change (add,edit or delete)
*
* @return void
*/
function register_changes(){
$this->db->query('UPDATE news SET counting = counting + 1 WHERE id=1');
}
/**
* get_news
*
* Get list of news
*
* @return void
*/
function get_news(){
//if($result = $this->db->query('SELECT * FROM news WHERE id<>1 ORDER BY add_date DESC LIMIT 50')){
if($result = $this->db->query('SELECT * FROM tbl_prototype')){
$return = '';
while($r = $result->fetch_object()){
$return .= '<p>id: '.$r->id_component.' | '.htmlspecialchars($r->description).' | '. $r->value . ' | ' . $r->technical_name_html . '</p>';
$return .= '<hr/>';
}
return $return;
}
}
/**
* add_news
*
* Add new message
*
* @param mixed $title
* @return void
*/
function add_news($title){
$title = $this->db->real_escape_string($title);
if($this->db->query('INSERT into news (title) VALUES ("'.$title.'")')){
$this->register_changes();
return TRUE;
}
return FALSE;
}
}
/* End of file db.php */
【问题讨论】：
-
到目前为止，基本脚本还在工作吗？你有任何错误吗？基本概念似乎很简单： 1. 使用 AJAX 查找是否进行了新更改。 2. 如果是这样，以 JSON 格式回显这些更改并更新计数器。听起来您需要 3 方面的帮助。解码 JSON 数据并使用 jQuery 根据 JSON 响应中的数据更新您的复选框。
-
已发布的基本脚本正在运行。不幸的是，它只显示一些数据，而不是我想要的复选框。
-
那么您需要更改两件事： 1. 更改 checker.php 以从您的表中查找您真正想要的数据并回显它。 2. 更改 index.php 以从 checker.php 获取响应并使用 javascript 相应地更新您的复选框。
-
在此处寻找有关 PHP、AJAX 和 mySQL 的帮助：w3schools.com/php/php_ajax_database.asp 在此处寻找有关 javascript 的帮助：w3schools.com/jsref/prop_checkbox_checked.asp
-
对不起，如果这个问题听起来很傻，但是我如何将 checker.php 的响应与复选框链接起来？感谢您的帮助。