ajaxを使ってphpと非同期通信を行おうとすると405エラーが出てしまいます

前提・実現したいこと

プログラミング初心者です。ajaxについての勉強をしようと思い、試しにネット上のコードを元に、簡単なコードを書いてみたところ、405エラーが出てしまいました。どこが原因なのか全く分からない状態です。どなたか、どうかよろしくお願いします。

発生している問題・エラーメッセージ

jquery-3.6.0.js:10109 POST http://127.0.0.1:5500/techacademy.php 405 (Method Not Allowed)

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>ajax</title>
8  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">
9  </script>
10</head>
11<body>
12  <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p>
13  <div id="return"></div>
14  <script src="main.js"></script>
15</body>
16</html>
17

javascript
1$(function(){
2    $("#send").on("click", function(){
3      let id = $("#main").val();
4      $.ajax({
5        type: "POST",
6        url: "ajax.php",
7        data: { "id" : id },
8        dataType : "json"
9      }).done(function(data){
10        $("#return").append('<p>'+data.id+' : '+data.school+' : '+data.skill+'</p>');
11      }).fail(function(XMLHttpRequest, status, e){
12        console.log(2);
13        alert(e);
14      });
15    });
16});
17

PHP
1<?php
2  $id = $_POST['id'];
3  $list = array("id" => $id, "school" => "テックアカデミー", "skill" => "PHPプログラミングスキル" );
4  header("Content-type: application/json; charset=UTF-8");
5  echo json_encode($list);
6  exit;
7?>

試したこと

VScodeのLiveServerはインストール済みで、htmlを右クリックし、open with Live Serverから開いています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

退会済みユーザー

2021/11/09 02:14

質問者さん、無言ですが、回答が付いているのでそれらに対するフィードバックを書こう。役に立った/立たなかったぐらいはすぐ返せるのでは？　役に立たなかったらどこが期待と違うかなどを書くと、よりあなたの期待に近い回答が得られるかも。とにかく無言で放置は NG です。

行動規範の内容に同意します

回答2件

405エラーが出てしまいます

その jQuery ajax のコードですと data: に設定された JavaScript オブジェクト { "id" : id } は application/x-www-form-urlencoded 形式に変換されてフォームデータとして送信されると思いますが（詳しくは以下の記事を見てください）、それでいいのでしょうか？

jQuery.ajax の data の型
http://surferonwww.info/BlogEngine/post/2015/10/05/what-must-be-set-to-data-option-in-jquery-ajax.aspx

受け側ではそれが許されてない（GET でクエリ文字列として受け取る、POST なら Content-type: application/json; charset=UTF-8 という JSON 形式を期待している）とか？

Fiddler などのキャプチャツールを使って要求・応答を調べてみてはいかがですか。

投稿2021/11/03 04:55

退会済みユーザー

総合スコア0