Ajaxとmysqlのデータ連携によるメッセージボード機能の作成
この記事では主に、掲示板機能を実現するための Ajax と mysql のデータ連携について詳しく紹介します。興味のある方は参考にしてください。
最近、Ajax と MySQL のデータ連携を実装するための小さなデモを作成しました。 js部分にはphp、データベースにはmysqlを使用します。node+mongodbバージョンは後で考えます。
mysql の使用とインストールについては詳しく説明しませんが、Baidu xampp、Apache サーバー、mysql データベースを自分で統合していますが、これは非常に使いやすいです。
まずサーバーとデータベースを開きます。ここで最初に「eleven」データベースを作成し、次にマイクロブログと呼ばれるテーブルを作成しました（注意：ここでは上位バージョンの 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>
<p id="box">
<p id="head">
留言板
</p>
<p id="fill_in">
<textarea id="content"></textarea>
<button id="btn">提交留言</button>
</p>
<!--留言列表-->
<p id="message_text">
<ul class="list">
</ul>
</p>
<!--分页-->
<p id="page">
<a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
</p>
</p>
</body>
<script src="Jq/jquery-3.1.1.min.js">
</html> コードが完全に表示できません、以下はコードのphp部分です。
パート 01、jq の ajax リクエストに続きます:
<script type="text/javascript">
$(function(){
$("#btn").on("click",function(){
if ($("#content").val() == "") {
alert("~~客官，说一句再走呗~~");
return;
}
else{
$.ajax({
type:"get",
url:"http://localhost/phpStudy/ajax03/message.php",
async:true,
dataType:"json",
data:{
content:$("#content").val(),
act:"add"
},
success:function(data){
// var result = JSON.parse(data);
if (data.error==0) {
createLi(data.id,$("#content").val(),data.time);
} else{
alert(data.msg);
}
}
});
}
});
//创建节点
function createLi(id,content,time){
var html = $('<li><p>'+content+'</p><p class="control"><span>时间：'+time+'</span>顶：<em>0</em>踩：<em>0</em><a class="remove" href="javasript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></p></li>');
$(".list").prepend(html);
var h = html.height();
html.height(0);
html.stop().animate({
height:h
},300);
//删除
html.find(".remove").on("click",function(){
html.stop().animate({
height:0
},300,function(){
html.remove();
})
});
}
})
</script>この部分は php コード部分です:
<?php
header("Content-type:text/html;charset=utf8");
date_default_timezone_set("PRC");
//链接数据库
$link = mysqli_connect("localhost", "root", "", "eleven");
//设置数据库编码格式
mysqli_query($link, "set names utf8");
?>注: この部分は、他のことを学ぶときに呼び出したので公開コードとして書きました。そのため、次のコード
include_once "comment.php";
この行は他のコードを参照しています
0){
$arr = ["error"=>0,"id"=>$insertId,"time"=>$times];
echo json_encode($arr);//将数组转化为json，方便前端使用
}
else{
$arr = ["error"=>1,"msg"=>"留言失败，请重试!"];
echo json_encode($arr);//将数组转化为json，方便前端使用
}
break;
case 'up':
$id = $_GET['id'];
$search = "SELECT up FROM microblog WHERE id = $id";
$result = mysqli_query($link, $search);
$upNum = mysqli_fetch_row($result)[0];
$upNum++;
$query = "UPDATE microblog SET up='{$upNum}' WHERE id = '{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)){//更新数据成功
echo '{"error":"0"}';
}
else{//更新失败
echo '{"error":"1","msg":"点赞失败！"}';
}
break;
case 'down':
$id = $_GET['id'];
$search = "SELECT down FROM microblog WHERE id = $id";
$result = mysqli_query($link, $search);
$downNum = mysqli_fetch_row($result)[0];
$downNum++;
$query = "UPDATE microblog SET down='{$downNum}' WHERE id = '{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)){//更新数据成功
echo '{"error":"0"}';
}
else{//更新失败
echo '{"error":"1","msg":"踩失败！"}';
}
break;
case 'remove':
$id = $_GET['id'];
$query ="DELETE FROM microblog WHERE id='{$id}'";
mysqli_query($link,$query);
if(mysqli_affected_rows($link)>0){//删除数据成功
echo '{"error":"0"}';
}
else{
echo '{"error":"1","msg":"删除失败！"}';
}
break;
case 'count'://返回总页码
$query = "SELECT count(id) FROM microblog";
$result = mysqli_query($link, $query);
$count = mysqli_fetch_row($result)[0];//以索引数组形式返回查询结果
$countPage = ceil($count/5);
echo '{"error":"0","countPage":"'.$countPage.'"}';
break;
case 'page'://点击分页或者是页面第一次加载
$index = $_GET["num"]*5;
$search = "SELECT * FROM microblog ORDER BY id DESC LIMIT {$index},5";//倒叙查询留言
$result = mysqli_query($link, $search);
$arr = [];//存查询出来的数据
while($row = mysqli_fetch_assoc($result)){
array_unshift($arr,$row);
}
// print_r($arr);
// {"error":"0","info":[{},{},{},{},{}]}
$resultArr = ["error"=>"0","info"=>$arr];
echo json_encode($resultArr);
break;
}
?>上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。
関連記事:
json 文字列と json 配列に応答する ajax の例 (グラフィック チュートリアル)
以上がAjaxとmysqlのデータ連携によるメッセージボード機能の作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7773
15
1644
14
1399
52
1296
25
1234
29
MySQL：世界で最も人気のあるデータベースの紹介
Apr 12, 2025 am 12:18 AM
MySQLはオープンソースのリレーショナルデータベース管理システムであり、主にデータを迅速かつ確実に保存および取得するために使用されます。その実用的な原則には、クライアントリクエスト、クエリ解像度、クエリの実行、返品結果が含まれます。使用法の例には、テーブルの作成、データの挿入とクエリ、および参加操作などの高度な機能が含まれます。一般的なエラーには、SQL構文、データ型、およびアクセス許可、および最適化の提案には、インデックスの使用、最適化されたクエリ、およびテーブルの分割が含まれます。
MySQLの場所：データベースとプログラミング
Apr 13, 2025 am 12:18 AM
データベースとプログラミングにおけるMySQLの位置は非常に重要です。これは、さまざまなアプリケーションシナリオで広く使用されているオープンソースのリレーショナルデータベース管理システムです。 1）MySQLは、効率的なデータストレージ、組織、および検索機能を提供し、Web、モバイル、およびエンタープライズレベルのシステムをサポートします。 2）クライアントサーバーアーキテクチャを使用し、複数のストレージエンジンとインデックスの最適化をサポートします。 3）基本的な使用には、テーブルの作成とデータの挿入が含まれ、高度な使用法にはマルチテーブル結合と複雑なクエリが含まれます。 4）SQL構文エラーやパフォーマンスの問題などのよくある質問は、説明コマンドとスロークエリログを介してデバッグできます。 5）パフォーマンス最適化方法には、インデックスの合理的な使用、最適化されたクエリ、およびキャッシュの使用が含まれます。ベストプラクティスには、トランザクションと準備された星の使用が含まれます
Apacheのデータベースに接続する方法
Apr 13, 2025 pm 01:03 PM
Apacheはデータベースに接続するには、次の手順が必要です。データベースドライバーをインストールします。 web.xmlファイルを構成して、接続プールを作成します。 JDBCデータソースを作成し、接続設定を指定します。 JDBC APIを使用して、接続の取得、ステートメントの作成、バインディングパラメーター、クエリまたは更新の実行、結果の処理など、Javaコードのデータベースにアクセスします。
なぜMySQLを使用するのですか？利点と利点
Apr 12, 2025 am 12:17 AM
MySQLは、そのパフォーマンス、信頼性、使いやすさ、コミュニティサポートに選択されています。 1.MYSQLは、複数のデータ型と高度なクエリ操作をサポートし、効率的なデータストレージおよび検索機能を提供します。 2.クライアントサーバーアーキテクチャと複数のストレージエンジンを採用して、トランザクションとクエリの最適化をサポートします。 3.使いやすく、さまざまなオペレーティングシステムとプログラミング言語をサポートしています。 4.強力なコミュニティサポートを提供し、豊富なリソースとソリューションを提供します。
MySQLの役割：Webアプリケーションのデータベース
Apr 17, 2025 am 12:23 AM
WebアプリケーションにおけるMySQLの主な役割は、データを保存および管理することです。 1.MYSQLは、ユーザー情報、製品カタログ、トランザクションレコード、その他のデータを効率的に処理します。 2。SQLクエリを介して、開発者はデータベースから情報を抽出して動的なコンテンツを生成できます。 3.MYSQLは、クライアントサーバーモデルに基づいて機能し、許容可能なクエリ速度を確保します。
DockerによるMySQLを開始する方法
Apr 15, 2025 pm 12:09 PM
DockerでMySQLを起動するプロセスは、次の手順で構成されています。MySQLイメージをプルしてコンテナを作成および起動し、ルートユーザーパスワードを設定し、ポート検証接続をマップしてデータベースを作成し、ユーザーはすべての権限をデータベースに付与します。
Laravelは紹介例
Apr 18, 2025 pm 12:45 PM
Laravelは、Webアプリケーションを簡単に構築するためのPHPフレームワークです。次のような強力な機能を提供します。インストール：Laravel CLIを作曲家にグローバルにインストールし、プロジェクトディレクトリにアプリケーションを作成します。ルーティング：ルート/web.phpのURLとハンドラーの関係を定義します。ビュー：リソース/ビューでビューを作成して、アプリケーションのインターフェイスをレンダリングします。データベース統合：MySQLなどのデータベースとのすぐ外側の統合を提供し、移行を使用してテーブルを作成および変更します。モデルとコントローラー：モデルはデータベースエンティティを表し、コントローラーはHTTP要求を処理します。
MySQLをCentos7にインストールする方法
Apr 14, 2025 pm 08:30 PM
MySQLをエレガントにインストールするための鍵は、公式のMySQLリポジトリを追加することです。特定の手順は次のとおりです。MYSQLの公式GPGキーをダウンロードして、フィッシング攻撃を防ぎます。 mysqlリポジトリファイルを追加：rpm -uvh https://dev.mysql.com/get/mysql80-community-rease-el7-3.noarch.rpm update yumリポジトリキャッシュ：yumアップデートインストールmysql：yumインストールmysql-server startup mysql sportin
