Home > Developer > Web Develop
The implementation of the principle is actually very simple, I am using the original JS write, of course, with the JQ seal turned good is the same (next time with JQ write another). The parsing is written in the code:
To build a table statement:
1 CREATE TABLE' comment ' (2' ID 'int not NULLAuto_increment COMMENT'PRIMARY KEY Index' ,3' Content 'text not NULLCOMMENT'Comment Content' ,4 PRIMARY KEY(' id ')5) ENGINE=MYISAMDEFAULTCHARSET=UTF86;Comment.sql
1<!doctype html>234<meta charset= "UTF-8" >5<meta name= "Viewport"6Content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" >7<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >8<title> Akita Ka-Simple ajax no Refresh comments </title>9Ten<body> One<form onsubmit= "return false;" > A<textarea placeholder= "RIP, Spit groove, praise, encouragement .... What you want to say is "id=" comment "name=" comment "style=" width:400px;height:80px; " ></textarea> -<span id= "msg" style= "color:red;" ></span> -<p><button id= "button" > Comment </button></p> the</form> -<pan id= "MSG2" ></pan> - - List of comments: + -<div id= "List" > +<?PHP A //The following is the operation of the database with mysqli, do not understand the words please go to my "mysqli operation database" this blog post at $mysqli=NewMysqli (' localhost ', ' root ', ' admin ', ' comment '); - $sql= "Select ' content ' from ' comment '"; - $res=$mysqli->query ($sql); - if($res){ - while($result=$res-Fetch_array ()) { - Echo' <p style= ' Microsoft Ya-black > '.$result[' content ']. ' </p>; in } - } to $res-Free (); + $mysqli-close (); -?> the</div> * $<script type= "Text/javascript" >Panax Notoginseng varxhr; - if(Window. XMLHttpRequest) {//based on different browser versions, instantiate the XMLHttpRequest object for sending HTTP requests. theXHR =NewXMLHttpRequest ();//Mainstream browsers +}Else { AXHR =NewActiveXObject (' microsoft.xmlhttp ');//IE5.5 (Laji) the } + //find the appropriate node elements, steal a lazy to use Byid - varOtex = document.getElementById (' comment ');//Input Box $ varObut = document.getElementById (' button ');//Button $ varomsg = document.getElementById (' msg ');//Prompt Information - varOlist = document.getElementById (' list ');//List of comments - theObut.onclick =function() {//Monitor Post Comment button click event - if(Otex.value = = = ") {//simple judgment.WuyiOMsg.style.color = ' Red '; theOmsg.innertext = ' Please fill in the comments after posting '; - return false; Wu } -Xhr.open (' Post ', ' comment.php ');//send a request, the first parameter uses post, the second parameter is the request address, the third parameter is sent asynchronously, (Boolean) by default True AboutXhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');//sets the post Send header information. If the get of the way is not required. $ vardata = "comment=" +otex.value;//sets the send parameter value. The time to receive it is this: $_post[' comment '; If it is a get Send method, the value is stitched directly into the URL of the request address in Xhr.open (). No parameters are required for xhr.send (). -Xhr.send (data);//sent. The request method is get without having to pass a parameter, -Xhr.onreadystatechange =function() {//Monitoring Status - if(Xhr.readystate = = 4 && xhr.status = = 200) {//① Gets the status of the Xhr object: 0 1 2 3 4 (4 indicates that the request is complete and can be directly judged.) Other status Description details: See later Post) ② Server Status 404 500 200 (This should all be understood) A if(Xhr.responsetext) {//in comment.php I used the input database affected records, when you successfully insert a data, return 1, so here directly to make a judgment. (This time using text to receive data, is to steal a lazy, next time with the number of groups or JSON to receive, high-end regular) +Omsg.innertext = ' comments published successfully '; theOMsg.style.color = ' #5194d2 '; - varOP = document.createelement (' P ');//Add a node that lets users see their comments on the fly. $ varOHr = document.createelement (' hr ');//Ibid . theOp.innertext = Otex.value;//Assign Value theOlist.appendchild (OP);//append nodes. (did not make a comment flashback view.) Next time) theOlist.appendchild (OHR);//Ibid . theOtex.value = ";//initializes the value. -}Else{ inOmsg.innertext = ' Comment published failed '; theOMsg.innerText.style.color = ' Red '; the return false; About } the } the } the } + -</script> the</body>Bayiindex.php1<?PHP2 if(!isset($_post[' Comment '])){3 Header("location:./index.php");4 }5 $mysqli=NewMysqli (' localhost ', ' root ', ' admin ', ' comment ');6 $content=addslashes(Htmlspecialchars($_post[' Comment ']));7 $sql= "INSERT into ' comment ' (' content ') VALUES ('$content‘)";8 $res=$mysqli->query ($sql);9 if($res){Ten Echo $mysqli-affected_rows; One } A $mysqli-close (); -?>comment.phpPHP with Ajax for a simple no-refresh comment
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
