PHP Ajax implementation page without refreshing comments

Source: Internet
Author: User

Everyone has posted comments on the website. The traditional posting process is nothing more than: posting-> submitting Page forms-> waiting to refresh the page. In this way, when the network is crowded, it often takes a long time to wait. Today, we will introduce the use of PHP + Ajax to achieve no refreshing pages and post comments, hoping to help beginners with ajax PHPer. First, we need a basic ajax development framework. The file ajax. js contains this framework. The Code is as follows: Copy codeThe Code is as follows: var http_request = false;
Function send_request (url) {// initialization, specifying the processing function and sending the request function
Http_request = false;
// Start initializing the XMLHttpRequest object
If (window. XMLHttpRequest) {// Mozilla Browser
Http_request = new XMLHttpRequest ();
If (http_request.overrideMimeType) {// sets the MIME category
Http_request.overrideMimeType ("text/xml ");
}
}
Else if (window. ActiveXObject) {// IE browser
Try {
Http_request = new ActiveXObject ("Msxml2.XMLHttp ");
} Catch (e ){
Try {
Http_request = new ActiveXobject ("Microsoft. XMLHttp ");
} Catch (e ){}
}
}
If (! Http_request) {// exception. An error occurred while creating the object instance.
Window. alert ("An error occurred while creating the XMLHttp object! ");
Return false;
}
Http_request.onreadystatechange = processrequest;
// Determine the request sending method, URL, and whether to execute the following code synchronously
Http_request.open ("GET", url, true );
Http_request.send (null );
}
// Function for processing the returned information
Function processrequest (){
If (http_request.readyState = 4) {// judge the object status
If (http_request.status = 200) {// The message is returned successfully. Start to process the information.
Document. getElementById (reobj). innerHTML = http_request.responseText;
}
Else {// The page is abnormal.
Alert ("the page you requested is abnormal! ");
}
}
}
Function checkfourm (obj ){
Var f = document. fourm;
Var newfourm = f. newfourm. value;
Var username = f. username. value;
Var id = f. id. value;
If (username = ""){
Document. getElementById (obj). innerHTML = " <font color = red> You must log on first! </Font> ";
Return false;
}
Else if (newfourm = ""){
Document. getElementById (obj). innerHTML = " <font color = red> you have not entered the comment! </Font> ";
Return false;
}
Else {
Document. getElementById (obj). innerHTML = "sending data ...";
Send_request ('sendnewfourm. php? Username = '+ username +' & newfourm = '+ newfourm +' & id = '+ id );
Reobj = obj;
}
}

A little ajax-based comments should be able to read this code. We can see that when we start to post comments, the code is displayed in a specific position: sending data .... Then call the callback function to process the data. Please refer to the server code:Copy codeThe Code is as follows: <? Php
Header ('content-Type: text/html; charset = GB2312 '); // avoid Chinese garbled characters. This is not required in linux.
$ Username = trim ($ _ GET ['username']);
$ Newfourm = trim ($ _ GET ['newfourm']);
$ Id = $ _ GET ['id'];
$ Time = date ("Y-m-d ");

Include ('inc/config. inc. php ');
Include ('inc/dbclass. php ');
$ Db = new db; // generates an instance from the database operation class
$ Db-> mysql ($ dbhost, $ dbuser, $ dbpassword, $ dbname); // call the connection Parameter Function
$ Db-> createcon (); // call to create a connection Function

$ Addsql = "insert into cr_fourm values (0, '$ newfourm',' $ username', '$ time', $ id )";
$ Db-> query ($ addsql );
Echo " <font color = red> the comment has been published successfully! </Font> ";
// Echo $ addsql;
$ Db-> close (); // close the database connection
?>

Because jsvascript uses UTF8 encoding, garbled characters will occur when ajax is used to send back to the server in windows. Therefore, it is necessary to start the first sentence of the application in win. The two files in the middle contain database operations and database configuration information. I am used to writing basic database operations into a class for convenient calling. I believe that you have basically understood the working principle of this program. The HTML code on the page is provided:Copy codeThe Code is as follows: <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td align = "center"> <? Php echo $ rows_p [p_info];?> </Td>
</Tr>
<Tr>
<Td align = "center"> <br> <iframe frameborder = "0" scrolling = "auto" src = "showfourm. php? Picid = <? = $ Id;?> "Style = HEIGHT: 250px; VISIBILITY: inherit; WIDTH: 98%; Z-INDEX: 2> </iframe>
</Td>
</Tr>
<Tr>
<Td align = "center"> <br>
<Div align = "center" id = "result"> </div>
<Form name = "fourm">
<Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td height = "25"> quick comments <span class = "STYLE1"> (login required first) Username:
<Input name = "username" type = "text" value = "<? = $ Username?> "Readonly>
</Span> </td>
</Tr>
<Tr>
<Td height = "32" align = "center" valign = "middle"> <textarea name = "newfourm" class = "f" id = "newfourm"> </textarea> </td>
</Tr>
<Tr>
<Td height = "32"> <input name = "submit" type = "button" value = "comment" onClick = "checkfourm ('result')">
<Input name = "reset" type = "reset" id = "reset" value = "re-enter">
<Input name = "id" type = "hidden" id = "id" value = "<? Php echo "$ id";?> "> </Td>
</Tr>
</Table>
</Form>
</Td>
</Tr>
</Table>

This is part of my web page, that is, the Framework Code that implements this function. The comments page is called with IFRAME (Hidden Frame). After the information is sent, you can only refresh the IFRAME to view the comments sent by you. You do not need to refresh the entire page throughout the process. Now, let's take a look! Pai_^
1. Click "Submit" to start sending data

2. Data is successfully sent.

3. Refresh the comment list

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.