主页 > 知识库 > Ajax与mysql数据交互实现留言板功能

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

热门标签:Linux服务器 Mysql连接数设置 阿里云 团购网站 服务器配置 科大讯飞语音识别系统 银行业务 电子围栏

最近自己做了一个小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("~~客官,说一句再走呗~~  

您可能感兴趣的文章:
  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
  • php+mysql结合Ajax实现点赞功能完整实例
  • ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
  • PHP+Mysql+Ajax+JS实现省市区三级联动
  • 解决了Ajax、MySQL 和 Zend Framework 的乱码问题
  • 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码

标签:衡水 广元 萍乡 枣庄 大理 江苏 衢州 蚌埠

巨人网络通讯声明:本文标题《Ajax与mysql数据交互实现留言板功能》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266