Okay, first, look, this is the AJAX message board. There's a waterfall flow, huh?
1. Today I learned the Ajax of jquery, directly on the code
[PHP]/JavaScript Document
$ (document). Ready (function (e) {
Loadhiglight ();//Load Highlight effects
$ ("#submit"). Click (function () {//' Leave Message ' button clicking Event
Get user Name
var strusetname = $ ("#userName"). Val ();
Get input message Content
var strcontent = $ ("#content"). Val ();
Get input Mailbox
var Stremail = $ ("#email"). Val ();
Start sending data
$.ajax ({
URL: ' Index.php?m=index&a=add ',
Type: ' POST ',
DataType: ' JSON ',
Data: {
Username:strusetname,
Content:strcontent,
Email:stremail
},
Success:function (JSON, Textstatus, XHR) {
if (json.state== ' OK ') {
Alert (' Operation tips, message success! ');
alert ();
var data=json.data[0];
var strtag=createtag (data.username,data.content,data.time);
$ (strtag). Prependto (' div #liuyan ');
//$("Hello world!"). Prependto (" P ");
}else{
Alert (' Operation Tip, message failed! \ n Error message: ' +json.error ';
}
}
})
});
Dynamic Loading Message
Loadmore ();
});
Monitoring scroll bar scrolling
$ (window). Scroll (function () {
Load new content when scrolling to the bottom 100 pixels
if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height () < 5) {
Loadmore ();
};
});
FY = 0;
function Loadmore () {
fy++;
Alert (FY);
$.getjson ("index.php?m=index&a=data&page=" + fy + "&rand=" + math.random (), function (JSON) {
for (var i = 0; I <= json.length-1; i++) {
Alert (json[i][' userName ');
Content = '' + json[i][' userName ' + '' + json[i][' content ' + ' + getlocaltime (json[i][' time ') + ';
Content= "
alert (content);
$ ("div #liuyan"). Append (Createtag (json[i][' userName '],json[i][' content '],json[i][' time '));
Loadhiglight ();
};
});
}
function Loadhiglight () {//For Ajax post-reload effects
$user = $ ("div. User");
$text = $ ("div. text");
$ ("div. Content"). each (function (index) {
$ (this). MouseMove (function () {
$user. EQ (index). CSS ("Color", "#0A8CD2");
$user. EQ (index). CSS ("Background", "#FFE6AD");
$text. EQ (index). CSS ("Background", "#FFFDF6");
}). mouseout (function () {
$user. EQ (index). CSS ("Color", "#000");
$user. EQ (index). CSS ("Background", "#E6F0F9");
$text. EQ (index). CSS ("Background", "#F8FBFD");
});
});
}
function Createtag (usetname, content, time) {
var strtag = '' + usetname + '' + content + ' + getlocaltime (time) + ';
return strtag;
}
function Getlocaltime (NS) {
return new Date (parseint (NS) *). toLocaleString (). Replace (/:\d{1,2}$/, ");
}
JavaScript Document
$ (document). Ready (function (e) {
Loadhiglight ();//Load Highlight effects
$ ("#submit"). Click (function () {//' Leave Message ' button clicking Event
Get user Name
var strusetname = $ ("#userName"). Val ();
Get input message Content
var strcontent = $ ("#content"). Val ();
Get input Mailbox
var Stremail = $ ("#email"). Val ();
Start sending data
$.ajax ({
URL: ' Index.php?m=index&a=add ',
Type: ' POST ',
DataType: ' JSON ',
Data: {
Username:strusetname,
Content:strcontent,
Email:stremail
},
Success:function (JSON, Textstatus, XHR) {
if (json.state== ' OK ') {
Alert (' Operation tips, message success! ');
alert ();
var data=json.data[0];
var strtag=createtag (data.username,data.content,data.time);
$ (strtag). Prependto (' div #liuyan ');
$ ("Hello world!"). Prependto ("P");
}else{
Alert (' Operation Tip, message failed! \ n Error message: ' +json.error ';
}
}
})
});
Dynamic Loading Message
Loadmore ();
});
Monitoring scroll bar scrolling
$ (window). Scroll (function () {
Load new content when scrolling to the bottom 100 pixels
if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height () < 5) {
Loadmore ();
};
});
FY = 0;
function Loadmore () {
fy++;
Alert (FY);
$.getjson ("index.php?m=index&a=data&page=" + fy + "&rand=" + math.random (), function (JSON) {
for (var i = 0; I <= json.length-1; i++) {
Alert (json[i][' userName ');
Content = '+ json[i][' userName '+ ' + ' + json[i][' content ' + ' + getlocaltime (json[i][' time ') + ';
Content= "
alert (content);
$ ("div #liuyan"). Append (Createtag (json[i][' userName '],json[i][' content '],json[i][' time '));
Loadhiglight ();
};
});
}
function Loadhiglight () {//For Ajax post-reload effects
$user = $ ("div. User");
$text = $ ("div. text");
$ ("div. Content"). each (function (index) {
$ (this). MouseMove (function () {
$user. EQ (index). CSS ("Color", "#0A8CD2");
$user. EQ (index). CSS ("Background", "#FFE6AD");
$text. EQ (index). CSS ("Background", "#FFFDF6");
}). mouseout (function () {
$user. EQ (index). CSS ("Color", "#000");
$user. EQ (index). CSS ("Background", "#E6F0F9");
$text. EQ (index). CSS ("Background", "#F8FBFD");
});
});
}
function Createtag (usetname, content, time) {
var strtag = '+ usetname + '+ content + ' + getlocaltime (time) + ';
return strtag;
}
function Getlocaltime (NS) {
return new Date (parseint (NS) *). toLocaleString (). Replace (/:\d{1,2}$/, ");
} The requested method is
[PHP] Function data ()
{
Introduction of Paging Class
Include "page.class.php";
Get the number of data tables
$rows = $this->db->count (' SELECT * from data ');
Create a Paging object
$page = new Page ($rows, 5, "");
$list = $this->db
->order (' ID DESC ')
->table (' data ')
->limit ($page->getlimit ())
->select ();
/*
echo "
";
Var_dump ($list);
echo "
";
*/
echo Json_encode ($list);
Exit ();
}
function data ()
{
Introduction of Paging Class
Include "page.class.php";
Get the number of data tables
$rows = $this->db->count (' SELECT * from data ');
Create a Paging object
$page = new Page ($rows, 5, "");
$list = $this->db
->order (' ID DESC ')
->table (' data ')
->limit ($page->getlimit ())
->select ();
/*
echo "
";
Var_dump ($list);
echo "
";
*/
echo Json_encode ($list);
Exit ();
}
This realizes the waterfall flow effect, a little disadvantage is if loaded into the last but no hint of oh, haha haha,
[PHP] function Add () {
//Adds the number of affected bars after adding, if greater than 0 adds success
$json [' State ']= ' no ';
if (Empty ($_post[' userName ')) {
$json [' Error ']= ' did not enter a user name ';
}elseif (Empty ($_post[' content ')) {
$json [' Error ']= ' did not enter message content ';
}elseif (Empty ($_post[' email ')) {
$json [' Error ']= ' did not enter a mailbox ';
}else{
isset ($_post[' content ')? $_post[' content ']=nl2br ($_post[' content ']): "";
$_post[' time ']=time ();
if ($this->db->data ($_post)->add () >0) {
/*
echo "add success";
//echo "";//Prevent duplicate submissions of refreshed forms
Header ("http/1.1 303 See other");
Header ("Location:"); Turn to the root directory
exit;
/
$json [' state ']= ' OK ';
$json [' Data ']= $this
->db
->table (' data ')
->where (' id= '. $this->db->last_insert_id () )
->select ();
}else {
$json [' Error ']= $this->db->error ();
//die ($this->db->error ());//Add failed output error message
}
}
Echo Json_encode ($json);
//var_dump ($_post);
}
function Add () {
Returns the number of affected bars after addition, if greater than 0 indicates a successful addition
$json [' state ']= ' no ';
if (Empty ($_post[' userName ')) {
$json [' Error ']= ' did not enter a user name ';
}elseif (Empty ($_post[' content ')) {
$json [' Error ']= ' did not enter message content ';
}elseif (Empty ($_post[' email ')) {
$json [' Error ']= ' did not enter the mailbox ';
}else{
Isset ($_post[' content ')? $_post[' content ']=nl2br ($_post[' content ']): "";
$_post[' time ']=time ();
if ($this->db->data ($_post)->add () >0) {
/*
echo "Add success";
echo "";//Prevent duplicate submissions of refreshed forms
Header ("http/1.1 303 See other");
Header ("Location:"); Turn to the root directory
Exit
*/
$json [' state ']= ' OK ';
$json [' Data ']= $this
->db
->table (' data ')
->where (' id= '. $this->db->last_insert_id ())
->select ();
}else {
$json [' Error ']= $this->db->error ();
Die ($this->db->error ());//Add failure output error message
}
}
echo Json_encode ($json);
Var_dump ($_post);
This is the message part of the code, haha, so you can leave a message directly on the page to see the effect, without refreshing the browser children, the effect is more beautiful jquery+ajax is the Ox x.
2. PHP Functions learned today
[PHP] Json_encode ();
Description
string
Json_encode( Mixed
$value
[, int
$options
= 0 ] )
The value
JSON form of the return value
Empty () returns True if the value is empty, returns false with value,
Time () get timestamp
MYSQL_INSERT_ID () returns the ID of the last operation's self-increment field
Json_encode (); Description string Json_encode (mixed $value [, int $options = 0]) returns the JSON form of value values empty () returns True if the value is NULL, returns a false value,
Time () get timestamp
MYSQL_INSERT_ID () returns the ID of the last operation's self-increment field
3. The JavaScript function learned today, which is used to convert timestamps.
[JavaScript] function Getlocaltime (NS) {
return new Date (parseint (NS) *). toLocaleString (). Replace (/:\d{1,2}$/, ");
}
jquery's append () is used to load the HTML in the back of the tag
Prependto () loading HTML code to the front of the label
function Getlocaltime (NS) {
return new Date (parseint (NS) *). toLocaleString (). Replace (/:\d{1,2}$/, ");
}
jquery's append () is used to load the HTML in the back of the tag
Prependto () loading HTML code to the front of the label
4. Get the experience today Ajax loads the page tag and the jquery effect disappears, so after Ajax loads the page tag, you rebind the jquery events and functions. Otherwise the effect will not be.
[JavaScript]
http://www.bkjia.com/PHPjc/477418.html www.bkjia.com true http://www.bkjia.com/PHPjc/477418.html techarticle Okay, let's see, here's the AJAX message board. There is a waterfall flow effect, ha 1. Today we learned about jquery Ajax, directly on the code [PHP]/JavaScript Document $ (document). Ready (Function (E ...