ajax+php无刷新回贴和注册检验实例_PHP教程

WBOY
Freigeben: 2016-07-13 10:48:56
Original
964 Leute haben es durchsucht

本文章来给大家介绍一个原生态的ajax+php无刷新回贴和注册检验实例,如果你对此有兴趣不防进入参考哦。

先看xin.sql数据库,我们可直接复制保存成xxx.sql哦。

 代码如下 复制代码

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,'大家了解Ajax技术吗?','ajaxuser','如何学习Ajax技术呢?',1),(2,'通过实例学习应该不错','tom','先看看基础概念,然后多从实例中学习。',1),(3,'谢谢!','max','非常感谢你的建议!',1);


index.php文件

 代码如下 复制代码





无刷新显示回帖


无刷新显示回帖




 $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[title]?> [=$row[username]?>]

               
=$row[content]?>
Nach dem Login kopieren

        


 }
?>



   


   
   


   
   


   
   


   

回帖
姓名:
标题:
内容:



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;
?>


 

bbs.js文件,里面包括了大量ajax文件啊

 代码如下 复制代码

//先创建一个空的bbs.js文件,并修改其属性为utf-8,才能保存中文。
var xmlHttp;                        //用于保存XMLHttpRequest对象的全局变量
var username;                       //用于保存姓名
var title;                          //用于保存标题
var content;                        //用于保存内容
var threadid;                       //用于保存主题编号

//用于创建XMLHttpRequest对象
function createXmlHttp() {
    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
    } else {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
    }
}

//提交回帖到服务器
function submitPost() {
    //获取帖子中姓名、标题、内容、主题编号四部分信息
    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();                                    //创建XMLHttpRequest对象
        xmlHttp.onreadystatechange = submitPostCallBack;    //设置回调函数
        xmlHttp.open("POST", "bbs_post.php", true);         //发送POST请求
        //设置POST请求体类型
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send("username=" + encodeURI(username) +
                     "&title=" + encodeURI(title) +
                     "&content=" + encodeURI(content) +
                     "&threadid=" + threadid);              //发送包含四个参数的请求体
    }
}

//检查表单是否内容已填写完毕
function checkForm() {
    if (username == "") {
        alert("请填写姓名");
        return false;
    } else if (title == "") {
        alert("请填写标题");
        return false;
    } else if (content == "") {
        alert("请填写内容");
        return false;
    }
    return true;
}

//获取查询选项的回调函数
function submitPostCallBack() {
    if (xmlHttp.readyState == 4) {
     alert(xmlHttp.responseText);
        createNewPost(xmlHttp.responseText);
    }
}

//创建新的回帖
function createNewPost(postId) {
    //清空当前表单中各部分信息
    document.getElementById("post_title").value = "";
    document.getElementById("post_content").value = "";
    document.getElementById("username").value = "";

    var postDiv = createDiv("post", "");    //创建回帖的外层div
    postDiv.id = "post" + postId;           //给新div赋id值

    var postTitleDiv = createDiv("post_title", title + " [" + username + "]");  //创建标题div
    var postContentDiv = createDiv("post_content", "

" + content + "
Nach dem Login kopieren
");    //创建内容div
    postDiv.appendChild(postTitleDiv);                          //在外层div追加标题
    postDiv.appendChild(postContentDiv);                        //在外层div追加内容

    document.getElementById("thread").appendChild(postDiv);     //将外层div追加到主题div中
}

//根据className和text创建新的div
function createDiv(className, text) {
    var newDiv = document.createElement("div");
    newDiv.className = className;
    newDiv.innerHTML = text;
    return newDiv;
}

css文件如下

 代码如下 复制代码

/* 页面基本样式 */
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;
}

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/632762.htmlTechArticle本文章来给大家介绍一个原生态的ajax+php无刷新回贴和注册检验实例,如果你对此有兴趣不防进入参考哦。 先看xin.sql数据库,我们可直接复...
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage