Ajax+php 更新なしポストと登録検証の例_PHP チュートリアル

WBOY

リリース： 2016-07-13 10:48:56

オリジナル

967 人が閲覧しました

この記事では、オリジナルの ajax+php の非更新応答と登録確認の例を紹介しますので、ご興味がございましたら、ご参照ください。

まず xin.sql データベースを確認します。それを直接コピーして xxx.sql に保存できます。

コードは次のとおりです	コードをコピー
シンを使用する; テーブルの作成 bbs_post ( id int(11) NOT NULL auto_increment, タイトル varchar(255) NOT NULL、ユーザー名 varchar(255) NOT NULL, コンテンツ varchar(255) NOT NULL, threadid int(11) NOT NULL, 主キー (ID) );

INSERT INTO bbs_post VALUES (1,'Ajax テクノロジを知っていますか?','ajaxuser','Ajax テクノロジを学ぶには?',1),(2,'例を通して学ぶと良いでしょう','tom' ,'最初に基本的な概念を見て、次に例からさらに詳しく学習してください。',1),(3,'ありがとうございます!','max','ご提案いただきありがとうございます!',1);

Index.php ファイル

コードは次のとおりです

コードをコピー

<頭>

更新せずに返信を表示
<スクリプト src="bbs.js">

更新せずに返信を表示

$conn = @mysql_connect("localhost","root","123") または die ("MySql 接続エラー");
mysql_select_db("xin",$conn);
mysql_query("名前を設定 'utf8'");
$sql = "select * from bbs_post where threadid = 1 ID asc で注文";
$query = mysql_query($sql);
while($row = mysql_fetch_array($query)){
?>

}
?>

返信

bbspost.php ファイル

名前:
タイトル:
内容:

コードは次のとおりです

コードをコピー

$title = $_POST["title"] //タイトルを取得
; $content = $_POST["content"] //コンテンツを取得します
; $username = $_POST["username"] //ユーザー名を取得します
$threadId = $_POST["threadid"] //スレッドIDを取得します

;

$conn = @ mysql_connect("localhost", "root", "123") または die("MySql 接続エラー");
mysql_select_db("xin", $conn);
mysql_query("名前を設定 'utf8'");

$sql="bbs_post に挿入 (タイトル、コンテンツ、ユーザー名、スレッド ID) " .
"値('$title','$content','$username','$threadId')";
エコー $sql;
mysql_query($sql);
//最後に使用した INSERT コマンドの ID を返します
$responseId=mysql_insert_id();
echo $responseId;
?>

bbs.js ファイルには、多数の ajax ファイルが含まれています

コードは次のとおりです

コードをコピー

//中国語を保存する前に、まず空の bbs.js ファイルを作成し、そのプロパティを utf-8 に変更します。
ヴァ var ユーザー名; 変数タイトル; var コンテンツ; var threadid; _
//XMLHttpRequest オブジェクトの作成に使用されます
関数 createXmlHttp() {
//window.XMLHttpRequest オブジェクトが存在するかどうかに応じて、異なる作成メソッドを使用します
If (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //FireFox、Opera、その他のブラウザでサポートされている作成メソッド

} その他 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") //IEブラウザでサポートされている作成メソッド
; }
}

//サーバーに返信を送信します
関数 submitPost() {
//投稿内の名前、タイトル、内容、トピック番号の 4 つの情報部分を取得します
ユーザー名 = document.getElementById("ユーザー名").value;

タイトル = document.getElementById("post_title").value;

コンテンツ = document.getElementById("post_content").value;
threadid = document.getElementById("threadid").value;
アラート(ユーザー名+""+タイトル+""+コンテンツ+""+スレッドID);
If (checkForm()) {
createXmlHttp(); // XMLHttpRequest オブジェクトを作成します
xmlHttp.onreadystatechange = submitPostCallBack //コールバック関数を設定します
; xmlHttp.open("POST", "bbs_post.php", true); //POSTリクエストを送信します
//POSTリクエストのボディタイプを設定します
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("ユーザー名=" + encodeURI(ユーザー名) +
"&title=" + encodeURI(タイトル) +
"&content=" + encodeURI(コンテンツ) +
"&threadid=" + threadid); "&threadid=" + threadid); // 4 つのパラメーターを含むリクエスト本文を送信します
}
}

//フォームが記入されているかどうかを確認してください
関数 checkForm() {
If (ユーザー名 == "") {
alert("名前を入力してください");
false を返す;
} else if (title == "") {
alert("タイトルを入力してください");
false を返す;
} else if (content == "") {
alert("内容を入力してください");
false を返す;
}
true を返します;
}

//クエリオプションのコールバック関数を取得します
関数 submitPostCallBack() {
If (xmlHttp.readyState == 4) {
アラート(xmlHttp.responseText);
createNewPost(xmlHttp.responseText);
}
}

//新しい返信を作成します
function createNewPost(postId) {
// 現在のフォームの情報をすべてクリアします
document.getElementById("post_title").value = "";
Document.getElementById("post_content").value = "";
document.getElementById("ユーザー名").value = "";

var postDiv = createDiv("post", "") // 返信の外側の div を作成します
PostDiv.id = "post" + postId // 新しい div に ID 値を割り当てます

;

var postTitleDiv = createDiv("post_title", title + " [" + ユーザー名 + "]") // タイトル div を作成します
var postContentDiv = createDiv("post_content", "

" + content + "

"); // コンテンツ div を作成します
PostDiv.appendChild(postTitleDiv); // 外側の div にタイトルを追加します
PostDiv.appendChild(postContentDiv); // コンテンツを外側の div に追加します

document.getElementById("thread").appendChild(postDiv); // 外側の div をテーマ div に追加します
}

//className と text に基づいて新しい div を作成します
function createDiv(クラス名, テキスト) {
var newDiv = document.createElement("div");
newDiv.className = クラス名;
newDiv.innerHTML = テキスト;
newDiv を返します;
}

CSSファイルは以下の通りです

コードは次のとおりです

コードをコピー

/* 基本的なページスタイル */
ボディ、TD、入力、テキストエリア {
フォントファミリー:Arial;
フォントサイズ:12px;
}

/* テーマのスタイル */
#スレッド{
枠線:1px 黒一色;
幅:300px;
マージン-ボトム:10px;
}

/* プロンプト情報 div のスタイル */
#statusDiv {
枠線:1 ピクセルの実線 #999;
背景:#FFFFCC;
幅:100px;
位置:絶対;
トップ:50%;
左:50%;
マージン:-50px 0 0 -100px;
幅:280px;
}

/* 投稿スタイル */
div.post {
境界線の下:1px 黒一色;
パディング:5px;
}

/* 投稿タイトルのスタイル */
div.post_title {
境界線の下:1px 点線 #0066CC;
フォントの太さ:太字;
}

/* 投稿コンテンツのスタイル */
div.post_content {
フォントサイズ:12px;
余白:5px;
}

/*返信フォームの基本スタイル*/
table.reply {
境界線の折りたたみ:折りたたみ;
幅:300px;
}

/* 返信テーブルのセルのスタイル */
table.reply td {
枠線:1px 黒一色;
パディング:3px;
}

/* 返信フォームのヘッダーのスタイル */
table.reply td.title {
背景:#003366;
色:#FFFFFF;
}