Ajax + php do not need to re-post and register for verification instances

Source: Internet
Author: User

Let's take a look at the xin. Sqldatabase first. We can copy and save it as xxx. SQL.

The code is as follows: Copy code

Use xin;
Create table bbs_post (
Id int (11) not null auto_increment,
Title varchar (255) not null,
Username varchar (255) not null,
Content varchar (255) not null,
Threadid int (11) not null,
Primary key (id)
);

Insert into bbs_post VALUES (1, 'Do you know about Ajax? ', 'Ajaxuser',' how do I learn Ajax technology? ', 1), (2,' it should be good to learn through instances ', 'Tom', 'first look at the basic concepts, and then learn from the instances. ', 1), (3,' thank you! ', 'Max', 'thank you very much for your suggestions! ', 1 );


Index. Php file

The code is as follows: Copy code

<Html>
<Head>
<Meta http-equiv = "Content-type" content = "text/html; charset = utf-8">
<Link href = "bbs.css" type = "text/css" rel = "stylesheet">
<Title> no need to display replies </title>
<Script src = "bbs. js"> </script>
</Head>

<Body>
<H1> no need to display replies <Div id = "thread">
<?
$ Conn = @ mysql_connect ("localhost", "root", "123") or die ("MySql connection error ");
Mysql_select_db ("xin", $ conn );
Mysql_query ("set names 'utf8 '");
$ SQL = "select * from bbs_post where threadid = 1 order by id asc ";
$ Query = mysql_query ($ SQL );
While ($ row = mysql_fetch_array ($ query )){
?>
<Div class = "post" id = "post <? = $ Row [id]?> ">
<Div class = "post_title"> <? = $ Row [title]?> [<? = $ Row [username]?>] </Div>
<Div class = "post_content"> <pre> <? = $ Row [content]?> </Pre> </div>
</Div>
<?
 }
?>
</Div>

<Table class = "reply">
<Tr>
<Td colspan = "2" class = "title"> Reply <input type = "hidden" name = "threadid" id = "threadid" value = "1"> </td>
</Tr>
<Tr>
<Td> Name: </td>
<Td> <input type = "text" name = "username" id = "username"> </td>
</Tr>
<Tr>
<Td> Title: </td>
<Td> <input type = "text" name = "post_title" id = "post_title"> </td>
</Tr>
<Tr>
<Td> Content: </td>
<Td> <textarea name = "post_content" id = "post_content"> </textarea> </td>
</Tr>
<Tr>
<Td colspan = "2"> <input type = "button" onclick = "submitPost ()" value = "submit"> </td>
</Tr>
</Table>

</Body>
</Html>


Bbspost. Php file

 

The code is as follows: Copy code

<? Php
$ Title = $ _ POST ["title"]; // obtain the title
$ Content = $ _ POST ["content"]; // get content
$ Username = $ _ POST ["username"]; // get username
$ ThreadId = $ _ POST ["threadid"]; // Obtain threadid

$ Conn = @ mysql_connect ("localhost", "root", "123") or die ("MySql connection error ");
Mysql_select_db ("xin", $ conn );
Mysql_query ("set names 'utf8 '");

$ SQL = "insert into bbs_post (title, content, username, threadid )".
"Values ('$ title',' $ content', '$ username',' $ threadid ')";
Echo $ SQL;
Mysql_query ($ SQL );
// Returns the ID of the last INSERT command.
$ ResponseId = mysql_insert_id ();
Echo $ responseId;
?>


 

The bbs. js file contains a large number of ajax files.

The code is as follows: Copy code

// Create an empty bbs. js file and modify its attribute to UTF-8 to save Chinese characters.
Var xmlHttp; // global variable used to save the XMLHttpRequest object
Var username; // used to save the name
Var title; // used to save the title
Var content; // used to save the content
Var threadid; // used to save the topic ID.

// Create an XMLHttpRequest object
Function createXmlHttp (){
// Use different creation methods based on whether the window. XMLHttpRequest object exists
If (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest (); // creation method supported by FireFox, Opera, and other browsers
} Else {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP"); // creation method supported by ie
    }
}

// Submit a reply to the server
Function submitPost (){
// Obtain the name, title, content, and topic number of a post.
Username = document. getElementById ("username"). value;
Title = document. getElementById ("post_title"). value;
Content = document. getElementById ("post_content"). value;
Threadid = document. getElementById ("threadid"). value;
Alert (username + "" + title + "" + content + "" + threadid );
If (checkForm ()){
CreateXmlHttp (); // Create an XMLHttpRequest object
XmlHttp. onreadystatechange = submitPostCallBack; // sets the callback function.
XmlHttp. open ("POST", "bbs_post.php", true); // send a POST request
// Set the POST request body type
XmlHttp. setRequestHeader ("Content-type", "application/x-www-form-urlencoded ");
XmlHttp. send ("username =" + encodeURI (username) +
"& Title =" + encodeURI (title) +
"& Content =" + encodeURI (content) +
"& Threadid =" + threadid); // send a request body containing four parameters
    }
}

// Check whether the content of the form has been filled in
Function checkForm (){
If (username = ""){
Alert ("Please enter your name ");
Return false;
} Else if (title = ""){
Alert ("Enter the title ");
Return false;
} Else if (content = ""){
Alert ("Enter the content ");
Return false;
    }
Return true;
}

// Obtain the callback function of the query option
Function submitPostCallBack (){
If (xmlHttp. readyState = 4 ){
Alert (xmlHttp. responseText );
CreateNewPost (xmlHttp. responseText );
    }
}

// Create a new reply
Function createNewPost (postId ){
// Clear the information of each part of the current form
Document. getElementById ("post_title"). value = "";
Document. getElementById ("post_content"). value = "";
Document. getElementById ("username"). value = "";

Var postDiv = createDiv ("post", ""); // create the outer div of the Reply
PostDiv. id = "post" + postId; // assign an id value to the new div

Var postTitleDiv = createDiv ("post_title", title + "[" + username + "]"); // create the title div
Var postContentDiv = createDiv ("post_content", "<pre>" + content + "</pre>"); // create a content div
PostDiv. appendChild (postTitleDiv); // Append the title to the outer div.
PostDiv. appendChild (postContentDiv); // append content to the outer div

Document. getElementById ("thread"). appendChild (postDiv); // Append the outer div to the topic div.
}

// Create a new div based on className and text
Function createDiv (className, text ){
Var newDiv = document. createElement ("div ");
NewDiv. className = className;
NewDiv. innerHTML = text;
Return newDiv;
}

The css file is as follows:

The code is as follows: Copy code

/* Basic page style */
Body, td, input, textarea {
Font-family: Arial;
Font-size: 12px;
}

/* Topic style */
# Thread {
Border: 1px solid black;
Width: 300px;
Margin-bottom: 10px;
}

/* The style of the message div */
# StatusDiv {
Border: 1px solid #999;
Background: # FFFFCC;
Width: 100px;
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-50px 0 0-100px;
Width: 280px;
}

/* Post style */
Div. post {
Border-bottom: 1px solid black;
Padding: 5px;
}

/* Post title style */
Div. post_title {
Border-bottom: 1px dotted # 0066CC;
Font-weight: bold;
}

/* Post content style */
Div. post_content {
Font-size: 12px;
Margin: 5px;
}

/* Basic style of the reply table */
Table. reply {
Border-collapse: collapse;
Width: 300px;
}

/* Reply to the table cell style */
Table. reply td {
Border: 1px solid black;
Padding: 3px;
}

/* Reply table header style */
Table. reply td. title {
Background: #003366;
Color: # FFFFFF;
}

/* Form element style */
Input, textarea {
Border: 1px solid black;
}

/* Text area Style */
Textarea {
Width: 200px;
Height: 50px;
}

/* Predefined format style */
Pre {
Margin: 0;
}

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.