Ajax与mysql数据交互实现留言板功能

2024-12-23 20:08:10

最近自己做了一个小demo，实现了Ajax与MySQL的数据交互，js部分用的是jq，后台用的是PHP，数据库是mysql，过时间再来一个node+MongoDB版的。

关于mysql的使用和安装，就不多讲了，自行百度xampp，Apache服务器和mysql数据库集成，非常好用

首先打开服务器和数据库，我这里先建立了一个“eleven”的数据库，下面建立了一个叫做microblog的表（请注意：我这里使用的是高版本的mysql，里面php链接数据库的方法使用的都是mysqli_ 如果版本过低，请使用mysql_ 方法，自行修改代码）
以下是代码部分：

html页面和js部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>微博留言板</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #box{
        width: 600px;
        /*height: 500px;*/
        border: 2px solid rgb(85,85,85);
        border-radius: 15px;
        margin: 50px auto;
        padding: 20px 10px 15px;
        background-color: rgb(85,85,85);
      }
      #content{
        display: block;
        resize: none;
        width: 550px;
        height: 200px;
        margin: 0 auto;
        border: 2px solid rgb(225,225,225);
        border-radius: 10px;
        text-align: center;
        font-size: 30px;
        background-color: rgb(225,225,225);
      }
      #content:focus{
        outline: none;
        border: 2px solid rgb(225,225,225);
        box-shadow: 0 0 15px rgb(225,225,225);
      }
      #btn{
        border: 2px solid rgb(255,204,0);
        width: 80px;
        height: 40px;
        border-radius: 5px;
        margin-top: 30px;
        font-size: 17px;
        cursor: pointer;
        outline: none;
        background-color: rgb(255,204,0);
      }
      .list{
        list-style: none;
        background-color: rgb(249,249,249);
        margin-top: 20px;
      }
      .list>li{
        padding: 20px 10px 10px;
        border-bottom: 2px solid rgb(68,68,68);
        font-size: 20px;
        color: rgb(200,214,225);
        position: relative;
        word-break: break-word;
        word-wrap: break-word;
        background-color: rgb(85,85,85);
      }
      .list>li>.control{
        position: absolute;
        bottom: 3px;
        right: 5px;
        font-size: 14px;
      }
      .list>li>p{
        margin-bottom: 25px;
      }
      .control span,.control em{
        display: inline-block;
        margin-right: 15px;
      }
      .control em{
        color: darkblue;
        cursor: pointer;
      }
      a{
        text-decoration: none;
        color: darkred;
      }
      #page>a{
        display:inline-block;
        width: 40px;
        height: 30px;
        margin-top: 10px;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        border-radius: 5px;
        color: white;
        background-color: rgb(51,21,70);
      }
      #head{
        color: rgb(200,214,225);
        font-size: 30px;
        height: 50px;
        border-bottom: 2px solid rgb(68,68,68);
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="head">
        留言板
      </div>
      <div id="fill_in">
        <textarea id="content"></textarea>
        <button id="btn">提交留言</button>
      </div>
      <!--留言列表-->
      <div id="message_text">
        <ul class="list">
        </ul>
      </div>
      <!--分页-->
      <div id="page">
        <a href="javasript:void(0)">1</a>
        <a href="javasript:void(0)">2</a>
      </div>
    </div>
  </body>
  <script src="Jq/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#btn").on("click",function(){
        if ($("#content").val() == "") {
          alert("~~客官，说一句再走呗~~

ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例

该实例通过ThinkPHP结合Ajax与mysql实现了客户端的通信功能,具体如下: 1.使用js的ajax局部刷新功能,每次刷新将数据库中读取出的新记录插入到页面的显示区域,代码如下: window.onload =setInterval(showWords1000);//加载完成之后开始执行刷新功能 function showWords()//刷新时被调用函数,实现ajax请求 { xmlHttp=GetXmlHttpObject();//从自定义的函数中获取请求对象. if (xmlHtt
php+mysql结合Ajax实现点赞功能完整实例

本文实例讲述了php+mysql结合Ajax实现点赞功能的方法.分享给大家供大家参考.具体如下: 要实现点赞功能,有多种实现方式,这里总结一下利用Ajax,php和mysql来实现点赞的数据的功能.具体步骤如下: 一.页面中的HTML代码部分: <span>0</span> <button onclick="goodplus(1);">good+1</button> <span>0</span> <butto
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery
落伍首发 php+mysql 采用ajax技术的省市地 3级联动无刷新菜单源码

绝对原创测试地址: http://www.mlmm.cn/mypage/?name=ceshi 测试页代码: 复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>php+ajax动态生成下拉菜单</title> <script lang
解决了Ajax、MySQL 和 Zend Framework 的乱码问题

问题: 在 Google Map 上用 Ajax 以 get 方式向服务器传递数据时,服务器端显示为 url 乱码, Zend Framework 向 MySQL 存储数据为乱码,但是提取出来又是正常中文字体, MySQL 中输入中文,显示在 PHP 网页上为乱码. 解决方式: 1. Ajax 的 url 编码需要转换,我使用的如下函数: public function js_unescape($str) { $ret = ''; $len = strlen($str); for ($i = 0
PHP+Mysql+Ajax+JS实现省市区三级联动

基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
Ajax与mysql数据交互实现留言板功能

最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是PHP,数据库是mysql,过时间再来一个node+MongoDB版的. 关于mysql的使用和安装,就不多讲了,自行百度xampp,Apache服务器和mysql数据库集成,非常好用首先打开服务器和数据库,我这里先建立了一个"eleven"的数据库,下面建立了一个叫做microblog的表(请注意:我这里使用的是高版本的mysql,里面php链接数据库的方法使用的都是mysqli_ 如
Ajax与mysql数据交互制作留言板功能（全）

最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是php,数据库是mysql,过时间再来一个node+mongodb版的. 关于mysql的使用和安装,就不多讲了,自行百度xampp,Apache服务器和mysql数据库集成,非常好用. 首先打开服务器和数据库,我这里先建立了一个"eleven"的数据库,下面建立了一个叫做microblog的表(请注意:我这里使用的是高版本的mysql,里面php链接数据库的方法使用的都是mysqli_
PHP结合Mysql数据库实现留言板功能

先给大家展示下留言板效果图: 最近看了下PHP基础语法,就想利用这些基本东西实现留言板,也是对基础知识的一个巩固. 什么是留言板?一种可以用来记录,展示文字信息的载体. 现切入正题,说说本次留言板是怎么实现! 首先用户提交留言后,相关内容存入服务器,当他想看的时候后台再把所有留言读出来,最后显示在浏览器上,用户就可以看到留言了. 这其中后台需要便于读写数据的一个工具,我选择mysql数据库来帮助我完成这些事. 我写了主要是三个php文件,分别是: conn.php 连接数据库: addmsg.p
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作.分享给大家供大家参考,具体如下: Ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp
php+Memcached实现简单留言板功能示例

本文实例讲述了php+Memcached实现简单留言板功能.分享给大家供大家参考,具体如下: MyPdo.php <?php class MyPdo{ private $pdo; function __construct() { $this->pdo = $this->getPdo(); } /** * CreatePDO * * @return PDO */ public function getPdo() { $dbms='mysql'; $dbName='testdb'; $use
php实现留言板功能（代码详解）

简单的PHP留言板制作做基础的留言板功能需要三张表: 员工表,留言表,好友表首先造一个登入页面: <form action="drcl.php" method="post"> <div>帐号:<input type="text" name="zhang"/></div> <div>口令:<input type="text" name=
简单实现PHP留言板功能

本文实例为大家分享了PHP留言板功能的具体实现代码,供大家参考,具体内容如下 HTML代码 <div class="continer" > <div class="head" style="background-color:rgb(217,237,247);height:50px;vertical-align:middle"><h2 style="color: rgb(81,117,114)"&g
微信小程序实现留言板功能

本文实例为大家分享了微信小程序实现留言板功能,可以手写,可以删除,可以快速留言,供大家参考,具体内容如下 const app = getApp(); Page({ /** * 页面的初始数据 */ data: { msgData: [ { child_id: 1, msg: "泡澡水不要太热.", checked:'' },//双引号 { child_id: 2, msg: "面部比较干,想补个水.", checked: '' }, { child_id: 3, m
PHP实现基本留言板功能原理与步骤详解

本文实例讲述了PHP实现基本留言板功能的方法.分享给大家供大家参考,具体如下: 作为一个PHP的初学者,我试着写了一个留言板,页面有点丑,多多见谅,嘻嘻嘻 #我们写留言板需要用到数据库,所以我们先要建立三个表 user表 friend表 text表 #首先需要写一个注册与登录 ##注册 zhuce.html <meta charset="utf-8"> <title>zhuce</title> </head> <body> &
基于vue和bootstrap实现简单留言板功能

本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今天呢,是我学习vue的第二天,我想制作一个简易的留言板.功能很简单,就是数据的增删改查,下面开始步入正题: 大致布局如下: 1.html布局如果大家不想自己去写css样式,使用bootstrap框架是一个很好地选择,它提供了一套响应式.移动设备优先的流式栅格系统. <div id="app&

Ajax与mysql数据交互实现留言板功能

相关推荐

随机推荐