温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-08-23 18:11:50 阅读:127 作者:chen 栏目:web开发
亿速云mysql数据库,读写分离,安全稳定,弹性扩容,低至0.3元/天!! 点击查看>>

本篇内容介绍了“怎么用Ajax与mysql数据交互实现留言板功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

关于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"> 
      *{ 
        margin0; 
        padding0; 
      } 
      #box{ 
        width600px; 
        /*height: 500px;*/ 
        border2px solid rgb(85,85,85); 
        border-radius15px; 
        margin50px auto; 
        padding20px 10px 15px; 
        background-colorrgb(85,85,85); 
      } 
      #content{ 
        display: block; 
        resize: none; 
        width550px; 
        height200px; 
        margin0 auto; 
        border2px solid rgb(225,225,225); 
        border-radius10px; 
        text-align: center; 
        font-size30px; 
        background-colorrgb(225,225,225); 
      } 
      #content:focus{ 
        outline: none; 
        border2px solid rgb(225,225,225); 
        box-shadow0 0 15px rgb(225,225,225); 
      } 
      #btn{ 
        border2px solid rgb(255,204,0); 
        width80px; 
        height40px; 
        border-radius5px; 
        margin-top30px; 
        font-size17px; 
        cursor: pointer; 
        outline: none; 
        background-colorrgb(255,204,0); 
      } 
      .list{ 
        list-style: none; 
        background-colorrgb(249,249,249); 
        margin-top20px; 
      } 
      .list>li{ 
        padding20px 10px 10px; 
        border-bottom2px solid rgb(68,68,68); 
        font-size20px; 
        colorrgb(200,214,225); 
        position: relative; 
        word-break: break-word; 
        word-wrap: break-word; 
        background-colorrgb(85,85,85); 
      } 
      .list>li>.control{ 
        position: absolute; 
        bottom3px; 
        right5px; 
        font-size14px; 
      } 
      .list>li>p{ 
        margin-bottom25px; 
      } 
      .control span,.control em{ 
        display: inline-block; 
        margin-right15px; 
      } 
      .control em{ 
        color: darkblue; 
        cursor: pointer; 
      } 
      a{ 
        text-decoration: none; 
        color: darkred; 
      } 
      #page>a{ 
        display:inline-block; 
        width40px; 
        height30px; 
        margin-top10px; 
        text-align: center; 
        line-height30px; 
        font-size20px; 
        border-radius5px; 
        color: white; 
        background-colorrgb(51,21,70); 
      } 
      #head{ 
        colorrgb(200,214,225); 
        font-size30px; 
        height50px; 
        border-bottom2px solid rgb(68,68,68); 
        margin-bottom20px; 
      } 
    </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("~~客官,说一句再走呗~~

“怎么用Ajax与mysql数据交互实现留言板功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

亿速云「云数据库 MySQL」免部署即开即用,比自行安装部署数据库高出1倍以上的性能,双节点冗余防止单节点故障,数据自动定期备份随时恢复。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/article/100797.htm

AI

开发者交流群×