宝马娱乐在线城-宝马娱乐在线

来自 互联网络 2019-10-01 21:34 的文章
当前位置: 宝马娱乐在线城 > 互联网络 > 正文

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

//

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

原创作品

 代码如下

本站原创:www.111cn.net

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

作者:面条爱兔子 QQ:271728967

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

注明:转载请说明原出去 http://www.111cn.net

index.php文件

//

 代码如下

现在长沙下着大雪啊,晚上回家也没什么事作,白天在公司写一个BBS完成了一部份,突然昨天听一个网友说如果能实现google效果就好了,今天无聊之下就想了想,觉得这个用ajax做应该不是什么难道了,就试着写了,说句实话我学ajax时间很短,也只懂皮毛了,各位看了后别丢石头了,把钱包丢过来吧,过年没钱用,;)呵呵.好了废话就不多说了下面进行正题.

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="bbs.css" type="text/css" rel="stylesheet">
<title>无刷新显示回帖</title>
<script src="bbs.js"></script>
</head>

首先我总体的简介一下,我只用了两个文件了,因为是测试所以就不分那么清楚了,把js文件和html写在一个文件test.html里面了,还有一个就是php文件post.php了,这个文件用来处理ajax发送过来的数进行处理,再由ajax把数据返回给test.html里面的div, 原理不这么简单了,下面我们来看代码.

<body>
<h1>无刷新显示回帖</h1>
<div id="thread">
<?
 $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)){
?>
   <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>

第一步创建数据表:test

<table class="reply">
<tr>
    <td colspan="2" class="title">回帖<input type="hidden" name="threadid" id="threadid" value="1"></td>
</tr>
<tr>
    <td>姓名:</td>
    <td><input type="text" name="username" id="username"></td>
</tr>
<tr>
    <td>标题:</td>
    <td><input type="text" name="post_title" id="post_title"></td>
</tr>
<tr>
    <td>内容:</td>
    <td><textarea name="post_content" id="post_content"></textarea></td>
</tr>
<tr>
    <td colspan="2"><input type="button" onclick="submitPost()" value="提交"></td>
</tr>
</table>

      CREATE TABLE `test` (
    `id` int(4) NOT NULL auto_increment,
    `title` varchar(50) default NULL,
     PRIMARY KEY  (`id`)
     ) ENGINE=InnoDB DEFAULT CHARSET=gb2312 AUTO_INCREMENT=5 ;

</body>
</html>

好了数据库创建成功了我们就来建立test.html文件,这个文件很简单,就是一个表单和一个div和CSS

bbspost.php文件

<style>
<!--
 body{font-size:12px;}
 #show{border:1px solid #9abcde; line-height:23px; width:200px; margin:0px;}
 #show li{list-style:none;}
 #sug{margin:0px auto;}
-->
</style>

 

上面为CSS了就是用来控制效果的,

 代码如下

<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
  <form name="form1" method="post" action=""><tr>
    <td>
      <input name="key" type="text" id="key" onFocus="other();" onKeyDown="sugguest();"  onBlur="losefouse();"  size="27" autocomplete=off >
      <input type="submit" name="Submit" value="111cn搜索">
    </td>
  </tr></form>
  <tr>
    <td><div id="sug" onClick="javascript:func();"></div></td>
  </tr>
</table>

<?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'");

第二步:就是js和xmlhttp的处理和调用了.

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

创建xmlhttp,这个函数我上次讲ajax+php模仿window文件管理器时讲过了,在用户注册也讲过了,这里不不说了,具体地址请到:

 

 

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

var xmlHttp = false;
function ajaxcreate(){
try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e2) {
  xmlHttp = false;
 }
 }
if (!xmlHttp && typeof XMLHttpRequest != \'undefined\') {
  xmlHttp = new XMLHttpRequest();
 }
if(!xmlHttp){alert(\'Create Xmlhttp Fail \');return false;}
}

 代码如下

下面这个函数sugguest()作用是取得key的值并发送给post文件进行处理,再调用returnstate()函数

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

function sugguest(){
 ajaxcreate();
 var xmvalue=document.getElementById("key").value;
 var url="post.php?key="+encodeURI(xmvalue)+"rnd="+Math.random();
 if (xmvalue== null || xmvalue.length>20 || xmvalue == "") return false;
 xmlHttp.open("POST",url,true); 
 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xmlHttp.send(xmvalue); 
 xmlHttp.onreadystatechange=returnstate; 
}

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

下面returnstate()函数是判断xmlhttp的状态是否等4,4表示发送成功,其实还一个200表示接收完毕

//提交回帖到服务器
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);              //发送包含四个参数的请求体
    }
}

本文由宝马娱乐在线城发布于互联网络,转载请注明出处:ajax+php无刷新回贴和注册检验实例

关键词: