Php practice 4_php tutorial

Source: Internet
Author: User
The fourth day of php practice. Let's take a look. this is an ajax message board. has waterfall flow effect, haha 1. I learned about jquery's ajax today and directly wrote the code [php] JavaScriptDocument $ (document ). ready (function (e. let's take a look. this is the ajax message board. waterfall streaming effect, ha


1. I learned about jquery's ajax today and went straight to the code.


[Php]/JavaScript Document
$ (Document). ready (function (e ){
LoadHiglight (); // load the highlighted effect


$ ("# Submit"). click (function () {// "message" button to click the event
// Obtain the user name
Var strUsetName = $ ("# userName"). val ();
// Obtain the entered message content
Var strContent = $ ("# content"). val ();
// Obtain the input email address
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 prompt, message successful! ');
// Alert ();
Var data = json. data [0];
Var strTag = createTag (data. userName, data. content, data. time );

$ (StrTag). prependTo ('P # liuyan ');

// $ ("Hello World!"). PrependTo (" p ");
} Else {
Alert ('Operation prompt, message failed! \ N error message: '+ json. error );
}
}
})
});
// Load messages dynamically
LoadMore ();
});

// Monitor scroll bar
$ (Window). scroll (function (){
// Load the new content when the scroll is over 100 pixels at the bottom.
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 );
$ ("P # liuyan "). append (createTag (json [I] ['username'], json [I] ['content'], json [I] ['Time']);
LoadHiglight ();
};

});
}

Function loadHiglight () {// for ajax reload special effects
$ User = $ ("p. user ");
$ Text = $ ("p. text ");

$ ("P. content"). each (function (index ){
$ (This). mousemove (function (){

$User.eq(index).css ("color", "#0A8CD2 ");

// Define user.eq(index).css ("background", "# FFE6AD ");
// Define text.eq(index).css ("background", "# FFFDF6 ");

}). Mouseout (function (){

$User.eq(index).css ("color", "#000 ");

// Define user.eq(index).css ("background", "# E6F0F9 ");
// Define 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) * 1000). toLocaleString (). replace (/: \ d {} $ /,'');
}

// JavaScript Document
$ (Document). ready (function (e ){
LoadHiglight (); // load the highlighted effect


$ ("# Submit"). click (function () {// "message" button to click the event
// Obtain the user name
Var strUsetName = $ ("# userName"). val ();
// Obtain the entered message content
Var strContent = $ ("# content"). val ();
// Obtain the input email address
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 prompt, message successful! ');
// Alert ();
Var data = json. data [0];
Var strTag = createTag (data. userName, data. content, data. time );

$ (StrTag). prependTo ('P # liuyan ');

// $ ("Hello World!"). PrependTo (" p ");
} Else {
Alert ('Operation prompt, message failed! \ N error message: '+ json. error );
}
}
})
});
// Load messages dynamically
LoadMore ();
});

// Monitor scroll bar
$ (Window). scroll (function (){
// Load the new content when the scroll is over 100 pixels at the bottom.
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 );
$ ("P # liuyan "). append (createTag (json [I] ['username'], json [I] ['content'], json [I] ['Time']);
LoadHiglight ();
};

});
}

Function loadHiglight () {// for ajax reload special effects
$ User = $ ("p. user ");
$ Text = $ ("p. text ");

$ ("P. content"). each (function (index ){
$ (This). mousemove (function (){

$User.eq(index).css ("color", "#0A8CD2 ");

// Define user.eq(index).css ("background", "# FFE6AD ");
// Define text.eq(index).css ("background", "# FFFDF6 ");

}). Mouseout (function (){

$User.eq(index).css ("color", "#000 ");

// Define user.eq(index).css ("background", "# E6F0F9 ");
// Define 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) * 1000). toLocaleString (). replace (/: \ d {} $ /,'');
} The request method is


[Php] function data ()
{
// Introduce the paging class
Include "page. class. php ";
// Obtain the data quantity of the data table
$ 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 ()
{
// Introduce the paging class
Include "page. class. php ";
// Obtain the data quantity of the data table
$ 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 ();
}
In this way, the Waterfall Stream effect is achieved. The disadvantage is that if the stream is loaded to the end but there is no prompt, hahahaha,

[Php] function add (){
// The number of affected items is returned after the addition. if the value is greater than 0, the addition is successful.
$ Json ['state'] = 'no ';
If (empty ($ _ POST ['username']) {
$ Json ['error'] = 'no user name entered ';

} Elseif (empty ($ _ POST ['content']) {
$ Json ['error'] = 'no message content entered ';

} Elseif (empty ($ _ POST ['email ']) {
$ Json ['error'] = 'no email address ';

} Else {
Isset ($ _ POST ['content'])? $ _ POST ['content'] = nl2br ($ _ POST ['content']): "";
$ _ POST ['Time'] = time ();
If ($ this-> db-> data ($ _ POST)-> add ()> 0 ){
/*
Echo "added successfully ";
// Echo "script" location. reload () script "; // prevents repeated submission of refreshed forms
Header ("HTTP/1.1 303 See Other ");
Header ("Location:"); // redirects 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 the failed output error message
}
}
Echo json_encode ($ json );
// Var_dump ($ _ POST );
}

Function add (){
// The number of affected items is returned after the addition. if the value is greater than 0, the addition is successful.
$ Json ['state'] = 'no ';
If (empty ($ _ POST ['username']) {
$ Json ['error'] = 'no user name entered ';

} Elseif (empty ($ _ POST ['content']) {
$ Json ['error'] = 'no message content entered ';

} Elseif (empty ($ _ POST ['email ']) {
$ Json ['error'] = 'no email address ';

} Else {
Isset ($ _ POST ['content'])? $ _ POST ['content'] = nl2br ($ _ POST ['content']): "";
$ _ POST ['Time'] = time ();
If ($ this-> db-> data ($ _ POST)-> add ()> 0 ){
/*
Echo "added successfully ";
// Echo "script" location. reload () script "; // prevents repeated submission of refreshed forms
Header ("HTTP/1.1 303 See Other ");
Header ("Location:"); // redirects 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 the failed output error message
}
}
Echo json_encode ($ json );
// Var_dump ($ _ POST );
} This is the code of the message part. haha, you can view the effect directly on the page after leaving the message, instead of refreshing the browser ghost. jquery + ajax is more elegant than x.


2. php functions learned today

[Php] json_encode (); descriptionString Json_encode(Mixed $value[,Int $options= 0])

ReturnvalueJSON format of value

If the value of empty () is null, true is returned. if the value is null, false is returned,

Time () get timestamp

Mysql_insert_id () returns the id of the auto-increment field of the last operation.

Json_encode (); indicates that string json_encode (mixed $ value [, int $ options = 0]) returns the value in JSON format empty (). If the value is null, true is returned, if there is a value, false is returned,
Time () get timestamp
Mysql_insert_id () returns the id of the auto-increment field of the last operation.

3. the javascript function learned today, which is used to convert the timestamp.

[Javascript] function getLocalTime (nS ){
Return new Date (parseInt (nS) * 1000). toLocaleString (). replace (/: \ d {} $ /,'');
}
Jquery append () is used to load the last HTML in the tag

PrependTo () loads HTML code to the front of the tag

Function getLocalTime (nS ){
Return new Date (parseInt (nS) * 1000). toLocaleString (). replace (/: \ d {} $ /,'');
}
Jquery append () is used to load the last HTML in the tag

PrependTo () loads HTML code to the front of the tag


4. the experience gained today is that after ajax loads web page labels, jquery's special effects will disappear. Therefore, after ajax loads web page labels, it is necessary to re-bind jquery events and functions. Otherwise, no special effects will be available.

[Javascript]

 
 
 

Ajax messaging board Oh. has waterfall flow effect, haha 1. I learned about jquery's ajax today and directly wrote the code [php]/JavaScript Document $ (document ). ready (function (e...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.