PHP7 メッセージボード開発のための Ajax 非同期送信
PHP7 チュートリアル掲示板開発に関する Ajax 非同期投稿の紹介
推奨 (無料): php7 チュートリアル , ajax チュートリアル
序文
このチュートリアルは、このアルバムの最も重要な部分です。フロントエンド技術の継続的な更新により、Web サイトの多くの機能の実装がフロントエンドに移管されていますが、2018 年第 1 四半期のプログラミング言語ランキングから判断すると、JavaScript が依然として最も人気のあるプログラミング言語です。したがって、js を詳しく学びたい場合は、Ajax が不可欠です。
前回の講座でjs検証についてお話しましたが、FriendsのPHP7掲示板開発(JS検証)をベースにコースウェアのコードを修正したもので、ajax非同期コードを追加するだけで簡単に完了します。操作部分。
なお、XMLHttpRequest オブジェクトとは何か、なぜそれを使用する必要があるのかなどについては、ここでは詳しく説明しません。また使えるようになったら、覚えていただくとさらに感動すると思います。テキストベースのテスト指向の指導を減らすことで、学習成果を達成できます。
エディタを開いて始めましょう!
Ajax 非同期のコア部分の説明
// 第一步 创建 XMLHttpRequest 对象，为了更容易理解，变量就用ajax
var ajax = new XMLHttpRequest();
// 第二步 初始化一个Ajax请求，url参数是远程请求地址ajax.php
ajax.open('POST', url, true); // 这里用到post提交留言，所以用post方式提交给服务器
// ajax.open('GET', url, true); // get方式请求服务器
// 第三步 发送请求；如果该请求是异步模式(默认)，该方法会立刻返回。
ajax.send(inputdata);
// 第四步 发送请求总该要知道有没收到吧，这里就需要用到Ajax的事件监听器onreadystatechange
ajax.onreadystatechange = function(){
// 这里判断服务器是否有数据响应，如果有则做些你要处理的逻辑，比如提示用户操作成功
}上記の 4 つのステップがまだ理解できない場合は、友人 A を見つけるための最初のステップと考えることができます。メールを送信するというステップ、そしてこのAさんにメールを送るというステップ2、友人が手紙の内容を書いて宛先を書いて封印し、切手を貼るというステップ3で、メールを届けるというステップでした。 、インターネット接続が利用可能であればすぐに返信がありました）、4番目のステップは、友人Aから返信を受け取ることでした。私はとてもうれしかったです。次に、返信の内容に基づいて、会議 (オンライン) や約束などの操作を行うことができます...
わかりました。完全なコードは次のとおりです。
HTML JS ページ コード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>留言板_科科分享</title>
<!-- 2.新建css样式文件并根据效果图编写css代码 -->
<link rel="stylesheet" href="feedback.css">
<!-- 3.js表单验证 -->
<script type="text/javascript">
function checkform(){
var nickname = document.getElementsByTagName('input')[0].value; // 获取用户输入的姓名
var tel = document.getElementsByTagName('input')[1].value; // 获取用户输入的联系方式
var content = document.getElementsByTagName('textarea')[0].value; // 获取用户输入的留言内容
// 如果没有输入姓名 则提示
if(nickname == ''){
alert('请输入您的姓名');
document.getElementsByTagName('input')[0].focus(); // 将光标定位到姓名输入框
return false; // 阻止冒泡 输入姓名后才能通过
}
// 如果没有输入联系方式 则提示
if(tel == ''){
alert('请输入您的联系方式');
document.getElementsByTagName('input')[1].focus(); // 将光标定位到联系方式输入框
return false; // 阻止冒泡 输入联系方式才能通过
}
// 如果没有输入留言内容 则提示
if(content == ''){
alert('请输入您的联系方式');
document.getElementsByTagName('textarea')[0].focus(); // 将光标定位到留言内容输入框
return false; // 阻止冒泡 输入留言内容才能通过
}
// js已经拿到了用户提交的数据，那接下来就是AJAX（页面无刷新提交数据到服务器-异步通信）
// 异步请求 start
var ajax, url, inputdata;
// 创建 XMLHttpRequest 对象
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
// 兼容Internet Explorer（IE5 和 IE6）使用 ActiveX 对象
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
url = 'ajax.php';
ajax.open('POST', url, true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); // 用POST的时候一定要有这句
inputdata = 'nickname='+nickname+'&tel='+tel+'&content='+content;
ajax.send(inputdata);
// 接收服务器返回的数据
ajax.onreadystatechange = function(){
// 获取服务器响应状态码
if(ajax.readyState == 4 && ajax.status==200){
// 获取服务器返回的响应返回的数据
var retdata = ajax.responseText;
if(retdata == 1){
alert('留言信息已提交成功！感谢您的宝贵意见。');
}
}
}
// 异步请求 end
return false; // 这里是为了方式submit点击后表单自动提交
// document.feedback_form.submit(); // 提交用户数据到后端action中的地址
}
</script>
</head>
<body>
<!-- 工作区，呈现给用户看的 -->
<!-- 1.开始搭建脚手架 -->
<p class="container_box">
<p class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">FEEDBACK</h5>
</p>
<p class="down">
<form name="feedback_form" action="/#" method="post" onsubmit="return false;">
<p class="input">
<input type="text" class="fl" name="name" placeholder="输入您的姓名" />
<input type="text" class="fr" name="tel" placeholder="输入您的联系方式" />
</p>
<textarea class="content" cols="30" rows="10" name="nr"></textarea>
<input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
</form>
</p>
</p>
</body>
</html>PHP コード (ajax.php)
<?php
include 'config.php';
// POST接收用户提交的数据
$nickname = !empty($_POST['nickname'])? addslashes(strip_tags($_POST['nickname'])):''; // 留言人名称
$tel = !empty($_POST['tel'])?addslashes(strip_tags($_POST['tel'])):''; // 留言人的联系方式
$content = !empty($_POST['content'])?addslashes(strip_tags($_POST['content'])):''; // 留言内容
$time = time(); // 当前系统时间，即用户留言时间
// 插入mysql语句
$sql = "INSERT INTO feedback (name, contact, content, addtime) VALUES ('{$nickname}', '{$tel}', '{$content}', '{$time}')";
// 立即执行mysql语句
$result = mysqli_query($mysqli, $sql); // 返回一个资源标识符，通常是数字
$insert_id = mysqli_insert_id($mysqli); // 返回数据表的自增长ID，比如新用户注册返回用户ID
// echo $insert_id; // 当你在调试的时候，你会发现echo是很好的帮手。
if($insert_id > 0){
// 如果入库成功，这里可以处理其他想要的逻辑
echo 1;
exit; // 退出程序，使其不再往下执行代码
}
// 这是错误的时候返回0
echo 0;
exit;忘れずに練習してください。以下のコメント欄に落書きを歓迎します。 ~
以上がPHP7 メッセージボード開発のための Ajax 非同期送信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7546
15
1381
52
83
11
21
89
php7.0にmongo拡張機能をインストールする方法
Nov 21, 2022 am 10:25 AM
php7.0 に mongo 拡張機能をインストールする方法: 1. mongodb ユーザー グループとユーザーを作成します; 2. mongodb ソース コード パッケージをダウンロードし、ソース コード パッケージを "/usr/local/src/" ディレクトリに配置します; 3. 「src/」ディレクトリに入ります; 4. ソースコードパッケージを解凍します; 5. mongodb ファイルディレクトリを作成します; 6. ファイルを「mongodb/」ディレクトリにコピーします; 7. mongodb 設定ファイルを作成して設定を変更します。
php7がTCPポートが機能していないことを検出した場合の問題を解決する方法
Mar 22, 2023 am 09:30 AM
php5 では、fsockopen() 関数を使用して TCP ポートを検出できます。この機能を使用して、ネットワーク接続を開き、ネットワーク通信を実行できます。ただし、php7 では、fsockopen() 関数でポートを開けない、サーバーに接続できないなどの問題が発生する可能性があります。この問題を解決するには、socket_create() 関数とsocket_connect() 関数を使用して TCP ポートを検出します。
php7.0 にプラグインがインストールされているのに、まだインストールされていないと表示される場合はどうすればよいですか?
Apr 02, 2024 pm 07:39 PM
PHP 7.0 でインストールされているプラグインが表示されない問題を解決するには: プラグインの設定を確認し、プラグインを有効にします。 PHP を再起動して、構成の変更を適用します。プラグイン ファイルの権限をチェックして、それらが正しいことを確認します。不足している依存関係をインストールして、プラグインが適切に機能することを確認します。他のすべての手順が失敗した場合は、PHP を再構築します。他に考えられる原因としては、プラグインのバージョンに互換性がない、間違ったバージョンをロードしている、PHP 構成の問題などが挙げられます。
PHP サーバー環境 FAQ ガイド: 一般的な問題を迅速に解決する
Apr 09, 2024 pm 01:33 PM
PHP サーバー環境の一般的な解決策には、正しい PHP バージョンがインストールされていること、および関連ファイルがモジュール ディレクトリにコピーされていることを確認することが含まれます。 SELinux を一時的または永続的に無効にします。 PHP.ini をチェックして構成し、必要な拡張機能が追加され、正しく設定されていることを確認します。 PHP-FPM サービスを開始または再起動します。 DNS 設定に解決の問題がないか確認してください。
php7.0のインストールとデプロイ方法
Nov 30, 2022 am 09:56 AM
php7.0 をインストールおよび展開する方法: 1. PHP 公式 Web サイトにアクセスして、ローカル システムに対応するインストール バージョンをダウンロードします; 2. ダウンロードした zip ファイルを指定したディレクトリに解凍します; 3. コマンド ライン ウィンドウを開いて、次のリンクに移動します。 「E:\php7」ディレクトリ 「php -v」コマンドを実行するだけです。
システムの再起動後にUnixSocketの権限を自動的に設定する方法は？
Mar 31, 2025 pm 11:54 PM
システムが再起動した後、UnixSocketの権限を自動的に設定する方法。システムが再起動するたびに、UnixSocketの許可を変更するために次のコマンドを実行する必要があります：sudo ...
Docker環境にPECLを使用して拡張機能をインストールするときにエラーが発生するのはなぜですか？それを解決する方法は？
Apr 01, 2025 pm 03:06 PM
エラーの原因とソリューションPECLを使用してDocker環境に拡張機能をインストールする場合、Docker環境を使用するときに、いくつかの頭痛に遭遇します...
php8 と php7 ではどちらが優れていますか?
Nov 16, 2023 pm 03:09 PM
PHP7 と比較すると、PHP8 にはパフォーマンス、新機能と構文の改善、型システム、エラー処理と拡張機能の点でいくつかの利点と改善点があります。ただし、どのバージョンを使用するかは、特定のニーズとプロジェクトの状況によって異なります。詳細な紹介: 1. パフォーマンスの向上、PHP8 はコードの実行速度を向上できるジャストインタイム (JIT) コンパイラーを導入します; 2. 新機能と構文の改善、PHP8 は名前付きパラメーターとオプションのパラメーターの宣言をサポートします。関数の作成 呼び出しがより柔軟になり、匿名クラス、プロパティの型宣言などが導入されています。
