ボタン押す->phpで処理->javascriptで処理の流れをしたいです

問題点

jQueryを介して画面ロードなしでbottun -> js -> phpでdbからデータ回収 -> jsで計算　を実行しようとしてます。
現在jQueryの読み込み関係のエラーに詰まってます
実行環境はMAMPです
現在はミニマムコードで検証中です

jquery.min.js:2 jQuery.Deferred exception: $(...).on(...).fail is not a function TypeError: $(...).on(...).fail is not a function

at HTMLDocument.<anonymous> (https://ryorar.tokyo/for_jquery.js:56:12)
at j (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
at k (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined

r.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).on(...).fail is not a function
at HTMLDocument.<anonymous> (for_jquery.js:56)
at j (jquery.min.js:2)
at k (jquery.min.js:2)

コード

DB接続呼びかけ用jsコード(for_jquery.js)

javascript
1
2$(function(){
3    $('#innerHTMLtxt').on("click",function(){//idのボタンが押されたらこれが発動するらしい...onclickの進化系！
4        const atkId = new Option(document.getElementById("atkName").value);
5        const difId = new Option(document.getElementById("difName").value);
6
7        $.post({
8            url: 'find_value.php',//新しいphpファイルの名前にするよ
9            data:{'opt': 'connect_database','atkId':atkId, 'difId':difId},//わいの愛しのidちゃんたちを書いていく！！
10            dataType: 'json', //必須。json形式で返すように設定（テンションの差よ）（マジレスマン）（いいね正解大卒）
11        }).done(function(atkArray,difArray,weaponArray){
12            var atkAH= atkArray[0];
13            var atkAA= atkArray[1];
14            var atkAM= atkArray[2];
15            var atkAD= atkArray[3];
16            var atkAS= atkArray[4];
17            var atkBH= atkArray[5];
18            var atkBA= atkArray[6];
19            var atkBM= atkArray[7];
20            var atkBD= atkArray[8];
21            var atkBS= atkArray[9];
22            var atkSkill= atkArray[10];
23            var atkName= atkArray[11];
24            var atkVisu= atkArray[12];
25            var weapona_name= atkArray[13];
26            var weaponm_name= atkArray[14];
27            var spe_type= atkArray[15];
28            var spe_damage= atkArray[16];
29            var spe_num= atkArray[17];
30            var spe_name= atkArray[18];
31
32            var difAH= difArray[0];
33            var difAA= difArray[1];
34            var difAM= difArray[2];
35            var difAD= difArray[3];
36            var difAS= difArray[4];
37            var difBH= difArray[5];
38            var difBA= difArray[6];
39            var difBM= difArray[7];
40            var difBD= difArray[8];
41            var difBS= difArray[9];
42            var difSkill= difArray[10];
43            var difVisu= difArray[11];
44            var difName= difArray[12];
45
46            var weapona_dam= weaponArray[0];
47            var weapona_num= weaponArray[1];
48            var weaponm_dam= weaponArray[2];
49            var weaponm_attribute= weaponArray[3];
50            var weaponm_heal= weaponArray[4];
51
52            getValue(atkAH,atkAA,atkAM,atkAD,atkAS,atkBH,atkBA,atkBM,atkBD,atkBS,atkSkill,atkName,atkVisu,weapona_name,weaponm_name,spe_type,spe_damage,spe_num,spe_name,difAH,difAA,difAM,difAD,difAS,difBH,difBA,difBM,difBD,difBS,difSkill,difVisu,difName,weapona_dam,weapona_num,weapona_dam,weaponm_dam,weaponm_attribute,weaponm_heal);
53            //getValue関数に、入手したデータを送ります！
54          })
55        }).fail(function(XMLHttpRequest, textStatus, error){
56            alert(error);
57
58        })
59
60})
61

DB接続用コード(find_value.php)

php
1<?php
2
3$atkArray = array();//変数宣言　
4$difArray = array();
5$weaponArray = array();
6$atkId = filter_input(INPUT_POST,"atkId"); //変数の出力
7$difId = filter_input(INPUT_POST,"difId");
8
9
10if( isset($atkId))//わんちゃんissetで変数を受け取った後関数を実行的なのができるかも
11{
12    try {
13
14            // データベースに接続
15            $pdo = new PDO(
16                'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4',
17                'viewers',
18                'Mypass1!',
19                [
20                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
21                    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
22                ]
23            );//今から、それぞれのカラム名つき、int指定込みで配列にデータを入れるコマンドを探す！締めはechoとexit!
24
25            //ここでは、アタッカーのyokai_dataDBから手に入る変数を入れる 1をpost atkIdに変える
26            $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
27            $stmt->bindValue(':id', $atkId);
28            $stmt->execute();
29            foreach($stmt as $row)
30            {
31            $atkStatus_a_h = (int)$row['status_a_h'];//dif
32            $atkStatus_a_a = (int)$row['status_a_a'];
33            $atkStatus_a_m = (int)$row['status_a_m'];
34            $atkStatus_a_d = (int)$row['status_a_d'];
35            $atkStatus_a_s = (int)$row['status_a_s'];
36            $atkStatus_b_h = (int)$row['status_b_h'];
37            $atkStatus_b_a = (int)$row['status_b_a'];
38            $atkStatus_b_m = (int)$row['status_b_m'];
39            $atkStatus_b_d = (int)$row['status_b_d'];
40            $atkStatus_b_s = (int)$row['status_b_s'];
41            $atkSkill = $row['skill_name'];//dif
42            $weapon_a = $row['weapon_a'];//none
43            $weapon_m = $row['weapon_m'];//none
44            $atkName = $row['yokai_name'];//dif
45            $atkVisu = $row['visu'];//dif
46            $spe_type = $row['spe_type'];//none
47            $spe_damage = $row['spe_damage'];
48            $spe_num = $row['spe_num'];
49            $spe_name = $row['spe_name'];
50            }
51        //データ読み込みを一部省略
52            
53$atkArray =array($atkStatus_a_h,$atkStatus_a_a,$atkStatus_a_m,$atkStatus_a_d,$atkStatus_a_s,$atkStatus_b_h,$atkStatus_b_a,$atkStatus_b_m,$atkStatus_b_d,$atkStatus_b_s,$atkSkill,$atkName,$atkVisu,$weapon_a,$weapon_m,$spe_type,$spe_damage,$spe_num,$spe_name);
54
55$weaponArray =array($weapon_a_dam,$weapon_a_num,$weapon_m_dam,$weapon_m_attribute,$weapon_m_heal);
56
57$difArray =array($difStatus_a_h,$difStatus_a_a,$difStatus_a_m,$difStatus_a_d,$difStatus_a_s,$difStatus_b_h,$difStatus_b_a,$difStatus_b_m,$difStatus_b_d,$difStatus_b_s,$difSkill,$difVisu,$difName);
58         
59            $pdo =null;
60      
61        } catch (PDOException $e) {
62        header('Content-Type: text/plain; charset=UTF-8', true, 500);
63        exit($e->getMessage()); 
64      
65    }
66      
67}
68
69echo json_encode($atkArray,$difArray,$weaponArray); //この値をfor_jquery.jsファイルに返します
70exit; //処理の終了
71
72?>

計算コード(real.js)

javascript
1
2function getValue(atkAH,atkAA,atkAM,atkAD,atkAS,atkBH,atkBA,atkBM,atkBD,atkBS,atkSkill,atkName,atkVisu,weapona_name,weaponm_name,spe_type,spe_damage,spe_num,spe_name,difAH,difAA,difAM,difAD,difAS,difBH,difBA,difBM,difBD,difBS,difSkill,difVisu,difName,weapona_dam,weapona_num,weapona_dam,weaponm_dam,weaponm_attribute,weaponm_heal) 
3{//引数はそのまま使ってます
4    let atkId = new Option(document.getElementById("atkName").value);
5    let atkType = new Option(document.getElementById("atkType").value);
6    let atkArm = new Option(document.getElementById("atkArm").value);
7    let atkLevel = new Option(document.getElementById("atkLevel").value);
8//少し省略
9var realAtkStatusH = atkAH + 0.010204 * (atkLevel-1) * (atkHpchange + atkBH - atkAH);
10
11//めちゃ省略してます
12   else
13    {//火力がインフレしてる時
14      howmanyTokill = Math.floor(howmanyTokill/100);
15      innerHTMLtxt.innerHTML ="期待値は"+resultNum+"なので、"+atkName+"の"+spe_name+"Gで"+difName+"が"+howmanyTokill+"体吹き飛びます! 命中率は"+(500-missingCount)/(500*spe_num)*100+"です！";
16    }
17  }

htmlコード(index.php)

html
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4<link rel="shortcut icon" href="icon.ico">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <meta http-equiv="Content-Style-Type" content="text/css">
7 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
8 <link rel="stylesheet" href="stylesheet.css">
9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10 <script type="text/javascript" src="real.js"></script><!--上に、先にjQuery読み込んでます！-->
11 <script type="text/javascript" src="for_jquery.js"></script>
12 <title>妖怪ウォッチ2ダメージ計算</title>
13</head>
14
15<body>
16<!--しばらく省略-->
17         <label for ="attackerSelect">妖怪の名前:</label> 
18          <select id="atkName" name="attackerSelect">
19               <option value="1">妖怪の種類を選択</option>
20               <option value="1">ぶようじん坊</option>
21               <option value="2">がらあきん坊</option>
22               <option value="3">さきがけの助</option>
23               <option value="4">ダラケ刀</option>
24               <option value="5">ザンバラ刀</option>
25          </select><!--ここのデータを、for_jquery.jsファイルが拾ってます！difNameも同様です-->
26<!--しばらく省略-->
27
28<div class="main-downdown">
29  <label for="label1">計算する</label>
30    <input type="button" id="label1" onclick="changeframe_blue();" ><!--ここのボタンでfor_jqueryファイルを起動させます！-->   
31 </div>
32 <div class="resultA" id="innerHTMLtxt"></div><!--ここに、getValueでの計算結果が映し出されます-->
33

エラーとその画像

どうやら、ajaxの一部のコード(fail文当たり)とjQueryにエラーが発生してるようです　ボタンを押しても何も発生してません。
このコードを更新し終わって、mtsさんの教えていただいたことを理解した後にコードを細分化して再度検証してきます。

m.ts10806

2021/11/12 01:12 編集

基本コピペで確認できるコードや参考にした記事があれば良いので、自身のURLは不要です。

m.ts10806

2021/11/12 01:30

あと、submitにしてないのは意図があるのですか？

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

問題点

コード

エラーとその画像

関連した質問