목차
无刷新显示回帖
백엔드 개발 PHP 튜토리얼 php+ajax制作无刷新留言板_PHP

php+ajax制作无刷新留言板_PHP

May 29, 2016 am 11:48 AM
php

本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图:

数据库连接代码如下:

<&#63;php
$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");
mysql_select_db("demo",$conn);
mysql_query("set names 'utf8'");
&#63;>
로그인 후 복사

index.php文件代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" type="text/javascript"></script>
</head>

<body>
<h1 id="无刷新显示回帖">无刷新显示回帖</h1>
<div id="thread">
<&#63;php
include("conn.php");
$sql = "select * from `bbs_post` where `threadid` ='1' order by id asc";
$query =mysql_query($sql);
while($row = mysql_fetch_array($query)){ 
&#63;>
  <div class="post" id="post<&#63;php echo $row['id'];&#63;>">
        <div class="post_title"><&#63;php echo $row['title'];&#63;> [<&#63;php echo $row['username'];&#63;>]</div>
        <div class="post_content"><pre class="brush:php;toolbar:false"><&#63;php echo $row['content'];&#63;>
로그인 후 복사
<?php } ?>
回帖
姓名:
标题:
内容:

bbspost.php文件代码如下

<&#63;php
include("conn.php");
$title = $_POST["title"]; //获取title
$content = $_POST["content"]; //获取content
$username = $_POST["username"]; //获取username
$threadId = $_POST["threadid"]; //获取threadid


$sql="insert into bbs_post (title,content,username,threadid) " .
  "values ('$title','$content','$username','$threadId')";
  mysql_query($sql);
 //传回最后一次使用 INSERT 指令的 ID
$responseId=mysql_insert_id();
echo $responseId;
&#63;>

로그인 후 복사

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;
  if (checkForm()) {
    createXmlHttp();                  //创建XMLHttpRequest对象
    xmlHttp.onreadystatechange = submitPostCallBack;  //设置回调函数
    xmlHttp.open("POST", "bbspost.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", "<pre class="brush:php;toolbar:false">" + content + "
로그인 후 복사
"); //创建内容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; }

bbs.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;
}
로그인 후 복사

以上就是本文的全部内容,希望对大家的学习有所帮助。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

CakePHP 프로젝트 구성 CakePHP 프로젝트 구성 Sep 10, 2024 pm 05:25 PM

이번 장에서는 CakePHP의 환경 변수, 일반 구성, 데이터베이스 구성, 이메일 구성에 대해 알아봅니다.

Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Dec 24, 2024 pm 04:42 PM

PHP 8.4는 상당한 양의 기능 중단 및 제거를 통해 몇 가지 새로운 기능, 보안 개선 및 성능 개선을 제공합니다. 이 가이드에서는 Ubuntu, Debian 또는 해당 파생 제품에서 PHP 8.4를 설치하거나 PHP 8.4로 업그레이드하는 방법을 설명합니다.

CakePHP 날짜 및 시간 CakePHP 날짜 및 시간 Sep 10, 2024 pm 05:27 PM

cakephp4에서 날짜와 시간을 다루기 위해 사용 가능한 FrozenTime 클래스를 활용하겠습니다.

CakePHP 파일 업로드 CakePHP 파일 업로드 Sep 10, 2024 pm 05:27 PM

파일 업로드 작업을 위해 양식 도우미를 사용할 것입니다. 다음은 파일 업로드의 예입니다.

CakePHP 라우팅 CakePHP 라우팅 Sep 10, 2024 pm 05:25 PM

이번 장에서는 라우팅과 관련된 다음과 같은 주제를 학습하겠습니다.

CakePHP 토론 CakePHP 토론 Sep 10, 2024 pm 05:28 PM

CakePHP는 PHP용 오픈 소스 프레임워크입니다. 이는 애플리케이션을 훨씬 쉽게 개발, 배포 및 유지 관리할 수 있도록 하기 위한 것입니다. CakePHP는 강력하고 이해하기 쉬운 MVC와 유사한 아키텍처를 기반으로 합니다. 모델, 뷰 및 컨트롤러 gu

CakePHP 데이터베이스 작업 CakePHP 데이터베이스 작업 Sep 10, 2024 pm 05:25 PM

CakePHP에서 데이터베이스 작업은 매우 쉽습니다. 이번 장에서는 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 이해하겠습니다.

CakePHP 유효성 검사기 만들기 CakePHP 유효성 검사기 만들기 Sep 10, 2024 pm 05:26 PM

컨트롤러에 다음 두 줄을 추가하면 유효성 검사기를 만들 수 있습니다.

See all articles