ajax+php no refresh post and registration verification example

This article will introduce to you an original ajax+php non-refresh post reply and registration verification example. If you are interested in this, feel free to refer to it.

Look at the xin.sql database first, we can directly copy and save it into 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) );

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 technology?','ajaxuser','How to learn Ajax technology?',1),(2,'It should be good to learn through examples','tom', 'Look at the basic concepts first, and then learn more from examples. ',1),(3,'Thank you!','max','Thank you very much for your suggestions!',1);

index.php file

The code is as follows

Copy code

代码如下

复制代码

无刷新显示回帖

$conn = @mysql_connect("localhost","root","123") or die ("MySql连接错误");
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)){
?>

[]

<?=$row[content]?>

}
?>

回帖
姓名：
标题：
内容：

Display replies without refreshing

$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)){<🎜> ?>

[]

}<🎜> ?>

Reply
Name:
Title:
Content:

bbspost.php文件

代码如下

复制代码

代码如下

复制代码

$title = $_POST["title"]; //获取title
$content = $_POST["content"]; //获取content
$username = $_POST["username"]; //获取username
$threadId = $_POST["threadid"]; //获取threadid

$conn = @ mysql_connect("localhost", "root", "123") or die("MySql连接错误");
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);
//传回最后一次使用 INSERT 指令的 ID
$responseId=mysql_insert_id();
echo $responseId;
?>

$title = $_POST["title"]; //获取title<🎜> $content = $_POST["content"]; //获取content<🎜> $username = $_POST["username"]; //获取username<🎜> $threadId = $_POST["threadid"]; //获取threadid<🎜> <🎜>$conn = @ mysql_connect("localhost", "root", "123") or die("MySql连接错误");<🎜> 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);<🎜> //传回最后一次使用 INSERT 指令的 ID<🎜> $responseId=mysql_insert_id();<🎜> echo $responseId;<🎜> ?>

bbs.js file, which contains a large number of ajax files

The code is as follows

Copy code

//First create an empty bbs.js file and modify its properties to utf-8 before saving Chinese.
var xmlHttp; //Global variables used to save XMLHttpRequest objects
var username; var title; var contents; var threadid;
//Used to create XMLHttpRequest object
function createXmlHttp() {
//Use different creation methods depending on whether the window.XMLHttpRequest object exists

If (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //Creation methods supported by browsers such as FireFox and Opera
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//Creation methods supported by IE browser
}
}

//Submit reply to server
function submitPost() {
//Get the four parts of information: name, title, content, and topic number in the 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 XMLHttpRequest object
xmlHttp.open("POST", "bbs_post.php", true); //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); "&threadid=" + threadid); //Send a request body containing four parameters
}
}

//Check whether the form has been filled in
function checkForm() {
If (username == "") {
alert("Please fill in your name");
         return false;
} else if (title == "") {
alert("Please fill in the title");
         return false;
} else if (content == "") {
alert("Please fill in the content");
         return false;
}
Return true;
}

//Get the callback function of query options
function submitPostCallBack() {
If (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
createNewPost(xmlHttp.responseText);
}
}

//Create a new reply
function createNewPost(postId) {
//Clear all information in 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 id value to new div

var postTitleDiv = createDiv("post_title", title + " [" + username + "]"); //Create title div
var postContentDiv = createDiv("post_content", "

" + content + "

"); //Create 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 theme 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

代码如下

复制代码

/* 页面基本样式 */
body, td, input, textarea {
font-family:Arial;
font-size:12px;
}

/* 主题的样式 */
#thread {
    border:1px solid black;
    width:300px;
    margin-bottom:10px;
}

/* 提示信息div的样式 */
#statusDiv {
    border:1px solid #999;
    background:#FFFFCC;
    width:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -100px;
    width:280px;
}

/* 帖子的样式 */
div.post {
border-bottom:1px solid black;
padding:5px;
}

/* 帖子title的样式 */
div.post_title {
border-bottom:1px dotted #0066CC;
font-weight:bold;
}

/* 帖子content的样式 */
div.post_content {
font-size:12px;
margin:5px;
}

/* 回帖表格基本样式 */
table.reply {
border-collapse:collapse;
width:300px;
}

/* 回帖表格单元格样式 */
table.reply td {
border:1px solid black;
padding:3px;
}

/* 回帖表格表头样式 */
table.reply td.title {
background:#003366;
color:#FFFFFF;
}

/* 表单元素样式 */
input, textarea {
border:1px solid black;
}

/* 文字区域样式 */
textarea {
width:200px;
height:50px;
}

/* 预定义格式样式 */
pre {
margin:0;
}

Copy code

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

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

/* Reply form header style */
table.reply td.title {
background:#003366;
Color:#FFFFFF;
} /* Form element styles */
input, textarea {
Border:1px solid black;
}

/* Text area style */
textarea {
Width:200px;
height:50px;
} /* Predefined format styles */
pre {
Margin:0;
} http://www.bkjia.com/PHPjc/632762.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/632762.htmlTechArticleThis article will introduce to you an original ajax+php no-refresh reply and registration verification example. If you If you are interested in this, please feel free to enter for reference. First look at the xin.sql database, we can directly copy...

ajax+php no refresh post and registration verification example_PHP tutorial

无刷新显示回帖

Display replies without refreshing