UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#97 JavaScriptのFetch APIでPHPに文字を渡す方法

記入日:2023-04-15 編集日:2023-04-15

JavaScriptのFetch APIでPHPに文字を渡してみようと思います。

この記事を読むと(約5分)
JavaScriptのFetch APIでPHPに文字を渡す基本的なコードがイメージできます。

Fetch APIを使用してJavaScriptからPHPに文字を渡す

以下は一般的な手順です。

Fetch APIを使用して、PHPのエンドポイントにリクエストを送信します。Fetch APIはJavaScriptの組み込みのWeb APIであり、HTTPリクエストを作成し、送信するために使用されます。

// JavaScriptの例
const url = 'example.php'; // PHPのエンドポイントのURLを指定
const data = { message: 'Hello, PHP!' }; // PHPに渡したいデータをオブジェクトとして定義

fetch(url, {
  method: 'POST', // HTTPメソッドを指定(POSTを使用する場合)
  headers: {
    'Content-Type': 'application/json', // リクエストのContent-TypeをJSONに設定
  },
  body: JSON.stringify(data), // データをJSON形式にシリアライズしてリクエストのボディに設定
})
.then(response => response.json())
.then(responseData => {
  // PHPからのレスポンスを処理
  console.log(responseData);
})
.catch(error => {
  // エラーの場合の処理
  console.error(error);
});

PHPのエンドポイントでリクエストを受け取り、データを処理します。PHPの$_POST変数を使用して、JavaScriptから送信されたデータにアクセスできます。

// PHPの例 (example.php)
// JavaScriptからのPOSTリクエストのデータを取得
$data = json_decode(file_get_contents('php://input'), true);

// データを処理する
$message = $data['message'];
$response = array('result' => 'success', 'message' => "Received message: $message");

// レスポンスをJSON形式で返す
header('Content-Type: application/json');
echo json_encode($response);

この例では、JavaScriptから送信されたデータをPHPで受け取り、$data変数にデコードして格納しています。その後、$data変数を使ってデータを処理し、レスポンスをJSON形式で返しています。

以上が、JavaScriptのFetch APIを使用してPHPに文字を渡す一般的な使い方の例です。必要に応じて、セキュリティ対策(例:入力値のバリデーション、エスケープ処理)を実施する必要があります。また、実際のシステムに合わせてエラーハンドリングやセキュリティ対策を適切に実装する必要があります。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。