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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

Q&A

解決済

3回答

1013閲覧

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

RyojiAraki

総合スコア79

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

0グッド

2クリップ

投稿2021/11/11 19:39

編集2021/11/14 21:16

問題点

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さんの教えていただいたことを理解した後にコードを細分化して再度検証してきます。
スクリーンショット

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/11/12 01:12 編集

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

2021/11/12 01:30

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

2021/11/12 07:01

buttonにしたのは、onclick属性を付けたかったからです、特別な意図とかはないです。。。 urlは消しときました! 回答ありがとうございます! すぐ確認します!
m.ts10806

2021/11/12 07:35

大抵の要素にクリックイベント付与できるのでtypeは関係ないですよ。 こちらが確認したいのは画面遷移を伴う送信にしたいかどうかです。
RyojiAraki

2021/11/12 08:44

画面遷移は控えたいです... ボタンをクリックするたびにロードしちゃうって認識であってますか? javascriptでの出力もinnerHTMLtxtで済ませたいと考えてます。
m.ts10806

2021/11/12 08:55

>ボタンをクリックするたびにロードしちゃうって認識であってますか? submitは指定URLへのリクエスト送信なので、仰るように「ロード」になります。 遷移しないなら私の回答のように非同期通信を採用してください。 ※続きは回答の方で >javascriptでの出力もinnerHTMLtxtで済ませたいと考えてます。 現状のコードだと「innerHTMLtxtというidを持つ要素への指定」になってますよ。 htmlもJavascriptも省略されすぎて何をしてるのか全く見えない感じになってます
RyojiAraki

2021/11/12 20:30

省略しすぎちゃいました...すみません/(^o^)\
m.ts10806

2021/11/12 20:32

質問本文編集して他者が流れを把握できる程度の状態にしてもらえたらと。
RyojiAraki

2021/11/13 11:36

たびたびすみません 現在、文法ミスがないのにmampでphpファイルを開けないエラーが発生しています "このページは動作していませんlocalhost では現在このリクエストを処理できません。 HTTP ERROR 500"というものです コードは数分で更新しますので少々お待ちください。 vscode for macのターミナルでfunction.php(DB接続の関数持ちphpファイル)の文法ミスを探すコマンド"php -l function.php "を打ったところ"No syntax errors detected in function.php"と返ってきたので恐らく別の原因があるのだと思われます。 よろしくお願いします。
RyojiAraki

2021/11/13 11:53

コード更新しました!
RyojiAraki

2021/11/13 18:03

経過報告です!だいぶ流れが見えてきました!今の方針は 1. jsファイル内に、ajaxでデータを求める関数を設置してonclickで発動するようにする 2. php側で、DB接続して全部のデータを配列に入力して、最後にechoでjsに変数を返す 3. done.functionで、目印でそれぞれの配列から必要なのを変数に入れる(語彙力が壊滅してて申し訳ないです) 4. 計算用関数に、引数として得た数字を代入する これなら、jsにphpかけない問題も解決できると思います! このサイトめっちゃわかりやすかったので、他の方が同じようなことで困ってたら是非勧めてあげてください! https://qiita.com/BRSF/items/e2b64416604f0ad8716a また進展があったら報告します!
guest

回答3

0

ベストアンサー

いろんな問題がある実装です。

  • headerのコールの前には如何なる出力もあってはいけません。

Warningが出るはずです。
今回の場合は特にContent-Typeを指定していますから、それより前に出力があるのは意味をなさなくなります。

  • htmlの宣言が古いです。

学習ならhtml5(広義の。狭義では廃止されたW3Cの方になるので注意)の記法を覚えましょう。

  • クライアントサイドとサーバーサイド

おおよそ理解はされてるとは思いますが、リクエストを受け取り処理して出力するのがサーバーサイド、出力を受け取り画面形成·表示するのがクライアントサイドです

ちなみにPHPは基本.phpファイルで動作するので、テンプレートエンジンでも使ってない限り.jsファイルにPHPコードを書いても動きません。
.phpにHTMLの一部としてJavascriptを記述するのはありですが、PHPの値を扱うのは様々なリスクや難なところがあります。

ということで、「JavascriptからサーバーサイドのPHPにリクエストを送り、必要な情報を得る」技術であるAjaxやFetch APIの利用をすすめます。

投稿2021/11/12 01:28

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

RyojiAraki

2021/11/12 08:47

phpでjavascriptを起動するんじゃなくて、javascriptからphpを呼び出して待機という発想はありませんでした! Ajaxとかに関して知識ゼロなので調べる時間ください!
RyojiAraki

2021/11/12 08:53

あと、headerコール辺りは全然把握してないのでもしかしたら再度そのことに関して質問させてもらうかもです。
m.ts10806

2021/11/12 08:56

PHPマニュアルへのリンク貼っておいたのですが読まれましたか?
RyojiAraki

2021/11/12 20:33

あんまりちゃんと読んでないです...せっかく貼ってくれたのに申し訳ないです 取り敢えず現状報告です。 tupe="button"で、onclick属性先にphp関数の実行(DB接続)を促すコードを書きました!そこで今jQueryを使っているのですが、何故かいつまで試しても$.ajaxが不明な変数扱いされてます。 別の質問箱にその件のことを質問するので良かったらそちらでも教えて頂きたいです。
m.ts10806

2021/11/12 20:35 編集

$ is not defined みたいなやつでしょうか。 jQuery本体js読み込んでないからでは。 jQueryはJavaScriptのライブラリで、標準実装されているものではありません。
RyojiAraki

2021/11/12 20:37

読み込んでるつもりなんです! そのコードとかバージョンも合わせて更新しますのでよければ確認お願いします。
m.ts10806

2021/11/12 21:02

読み込み順が逆です。 オブジェクトの後方参照はできません。
m.ts10806

2021/11/12 21:04

それに、回答で書いているように.jsファイルでPHPは実行できません。 PHPからのレスポンスを「取得したいデータ」にまとめて、受け取ってJavaScriptで加工してください。
RyojiAraki

2021/11/12 21:09

読み込み順ってヘッダーの配置のことであってますか? 先程、逆さまにして試しましたが、同じ内容のエラーメッセージが出てきました泣 jsファイルでphpって、jsonから変換している箇所のことですか? なんとかしてみます!
m.ts10806

2021/11/12 21:13

>先程、逆さまにして試しましたが、同じ内容のエラーメッセージが出てきました泣 変更後のコードで更新してください。 ただ type: 'post',   //post or get 全角スペース↑入ってますよ Illegal invocation 不正な呼び出し です。 >jsファイルでphpって var atkName = JSON.parse('<?php echo $atkName_json; ?>');//phpで入手したデータを取り込んでます var difName = JSON.parse('<?php echo $difName_json; ?>'); var spe_name = JSON.parse('<?php echo $spe_name_json; ?>');
m.ts10806

2021/11/12 21:23 編集

あと、回答あまり理解されてないように思います。 jsから直接phpの関数をコールできるわけではありません。 「リクエスト」はつまりformリクエストと同じく key=>valueの形式で送信された情報を受け取るのみ。 funcというkeyで送ってその関数が呼ばれるわけではなく、 POSTで送信したら$_POST["func"]でconnect_with_dataという”文字列”が取得できるというだけの話。 呼び出し元に返す情報についても、そのPHPで出力された情報がそのまま帰ります。 JSONで返したいならレスポンスヘッダのcontent-typeもJSONにしなければなりませんし、回答に書いたように出力後にheader()をコールしてはいけません。 PHPでやることは「レスポンスヘッダでJSONを宣言し、取得したい情報を配列に詰め込んでjson_encode()してechoする」ことかと思います。 そうするとajaxの.done()のコールバック引数でPHPから返した値がJSON形式のオブジェクトとして取得できます。 言語は違いますが考え方を理解するには下記のような記事が良いと思います。 https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
RyojiAraki

2021/11/12 21:26

jsonありがとうございます! 全角消して、順番変えて[ファイル名変更&開発ツール確認]で更新できてるのは確認できましたが、やはり同じエラーが出てしまいます... jQuery-3.6.0.min.js:2 Uncaught TypeError: Illegal invocation at i (jQuery-3.6.0.min.js:2) at At (jQuery-3.6.0.min.js:2) at At (jQuery-3.6.0.min.js:2) at At (jQuery-3.6.0.min.js:2) at Function.S.param (jQuery-3.6.0.min.js:2) at Function.ajax (jQuery-3.6.0.min.js:2) at connect_data (a.js:14) at HTMLInputElement.onclick ((インデックス):561)
m.ts10806

2021/11/12 21:28

あのですから、更新後のコードを。
RyojiAraki

2021/11/12 21:28

記事読ませて頂きます! 丁寧にありがとうございます 実は全然理解できてなくて試し試しにコーディングしてます この記事読んで思考を深めてから再トライしようと思います!!
RyojiAraki

2021/11/12 21:32

失礼いたしましたm(_ _)m jsファイルの読み込み順序とpostの全角を調整しました! 今からは 1:記事を読んで理解を深める 2:jsonの別処理方法を模索する 3:phpでの呼び出しコードを変更する をする予定です!
m.ts10806

2021/11/12 21:51 編集

JavaScriptにしてもAjaxにしてもPHPにしてももっとミニマムコードから試した方が良いですよ。 ・クリックが呼び出されるコード ・jQueryが使えることを確認するコード ・PHPは単にechoするだけにしてajaxの動作が確認できるコード ・PHPからJSON文字列を返してajaxのコールバックでJSONオブジェクトが取得できるコード のような形で、細分化して個別確認します。 熟練者でも一気に全部やりきりません。むしろ熟練者程、単機能を単体で確認して機能を結合して組み上げていきます。(なので設計が大事)
RyojiAraki

2021/11/13 09:58

アドバイスありがとうございます! 実は今外国にいて時差があるので返信遅れてしまって申し訳ないです。 只今jQueryの読み込みテストをしています! 何か解決の糸口が見え次第戻ってきます!
RyojiAraki

2021/11/13 10:41

経過報告です JSファイルは古いバージョンのものにしたら読み込めました!(3.4.2) コードはある程度完了してから更新します!
m.ts10806

2021/11/13 21:16 編集

同try-catch内において同じExceptionはcatchできないはずで。 return のあとに処理入れても意味がないはずで(IDEなら警告が出る) jQueryのバージョンも関係ないはずで。
m.ts10806

2021/11/13 21:18 編集

>responseがダメみたいです いえ、エラーからするとelementがnullです。 エラーは「nullにはinnerHTMLというプロパティは呼び出せない」とありますから。 理由は要素を読み込む前に実行しているから(前段の「jQuery本体読み込み前にjQueryの機能を呼び出している」とやっていることは同じ)。 document ready 内に入れるか、jsの読み込み・実行を</body>の直前に置いてください。 responseの内容はconsole.log()で確認すれば良いです。
RyojiAraki

2021/11/13 23:03

ありがとうございます! やはり、今もjqueryのファイル読み込みで詰まっています 読んで理解するのに時間がかかるので少々お待ちください あと、コーディングめっちゃ進みました!! jQueryの読み込みがうまくいけば完璧だと思います!!! コード更新->mtsさんのアドバイスを理解の順で行きます!
m.ts10806

2021/11/13 23:15

「詰まってます」だけでは何が起きてるのかさっぱりわかりません
RyojiAraki

2021/11/13 23:18

詳しくは更新したトップを見てくださいヽ( ̄д ̄;)ノ=3=3=3 更新スピード遅くてすみません、、、
RyojiAraki

2021/11/14 00:05

とりあえず今のコードに更新しました!これは試験段階のものではなく実際にサイトに使うものです! >return のあとに処理入れても意味がないはずです 了解です!find_value.phpコード更新しました! >同try-catch内において同じExceptionはcatchできないはずです ごめんなさい、理解力が乏しいゆえ掴み取れませんでした。 >jQueryのバージョンも関係ないです 何が原因だったのでしょうか...?再度検証してきます! >エラーは要素を読み込む前に実行しているから ためになります!console.log駆使して頑張ります!!
m.ts10806

2021/11/14 02:27

コード変わりすぎて雑にやってる印象しかないです。ミニマムコードで試しましたか?
RyojiAraki

2021/11/14 10:31

色々試して、いちばん良さそうな型に落ち着いたつもりです!元の知識がなくて不安定なのはお許しください、、、 昨日はあの後すぐ寝てしまったので今からミニマムで試します!
RyojiAraki

2021/11/14 13:07

さっきミニマムでpost通信成功しました... 今興奮してるのでランニングで頭冷やしてきます。 とりあえずコードここに貼っておきます 見づらかったらすみません (challenge.js) const atkId = '322'; const difId = '440'; $.ajax({ type:'post', url:'http://localhost:8888/function.php', data:{'func':'get_context',atkId:atkId,'difId':difId}, dataType:'json', }) .done(function(response) { //正常に処理が完了した時 //成功した時に、計算用関数(下にあるやつ)を実行するようにします! element.innerHTML = "<p>"+response+"</p>"; }) .fail(function(xhr) { alert("失敗!"); }) .always(function(xhr, msg) { }); (function.php) <?php function get_context($atk_name,$dif_name){ try { /* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */ // データベースに接続 $pdo = new PDO( 'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4', 'viewers', 'Mypass1!', [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, ] ); $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id'); $stmt->bindValue(':id', $atk_name); $stmt->execute(); foreach($stmt as $row) { $atkName = $row['yokai_name']; } $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id'); $stmt->bindValue(':id', $dif_name); $stmt->execute(); foreach($stmt as $row) { $difName = $row['yokai_name']; } $atkName_json = json_encode( $atkName ); return $atkName_json; $pdo =null; } catch (PDOException $e) { header('Content-Type: text/plain; charset=UTF-8', true, 500); exit($e->getMessage()); } catch (PDOException $e) { // エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する // - もし手抜きしたくない場合は普通にHTMLの表示を継続する // - ここではエラー内容を表示しているが, 実際の商用環境ではログファイルに記録して, Webブラウザには出さないほうが望ましい header('Content-Type: text/plain; charset=UTF-8', true, 500); exit($e->getMessage()); } } $func = $_POST['func']; $atk_name= $_POST['atkId']; $dif_name= $_POST['difId']; echo $func($atk_name,$dif_name); ?> (index.php) <!DOCTYPE html> <html lang="jp"> <head> <title>サンプルページ</title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <!-- ここからHTMLでマークアップする --> <!-- JQeryを読み込む --> <!--<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- 自分で作成したJavaScriptを読み込む --> <script src="challenge.js"></script> <div id="element"></div> </body> </html>
RyojiAraki

2021/11/14 15:25

進捗報告です また本番用のコードだけ Uncaught TypeError: Illegal invocation とエラーが出ました。 ミニマムで原因を探るのでもう少々お待ちくださいm(_ _)m
RyojiAraki

2021/11/14 16:52

エラーの正体が分かりかけてきました ajaxで複数のデータを返す時に複雑な操作が必要っぽいです もう少し詳しくみてみます
RyojiAraki

2021/11/14 17:47

<今わかったこと> ajax通信のphpのreturnで、複数の配列を返すことはできない! 複数配列持ってるので、一つにまとめちゃおうと思います! 随時結果報告します!通知量が増えてたら申し訳ないですm(_ _)m
RyojiAraki

2021/11/14 19:14

謎の現象が起きてます... jsonで渡す直前まで普通なのに、jsで受け取った瞬間全てnullになる現象です 今のコード貼っておきます (demo.js) $.ajax({ type:'post', url:'http://localhost:8888/demo.php', data:{'func':'get_context',atkId:atkId,'difId':difId}, datatype : "json", }) .done(function(response) { //正常に処理が完了した時 //成功した時に、計算用関数(下にあるやつ)を実行するようにします! element.innerHTML = "<p>"+response+"</p>"; }) .fail(function(xhr) { alert("失敗!"); }) .always(function(xhr, msg) { }); (demo.php) <?php function get_context($atk_name,$dif_name){ try { /* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */ // データベースに接続 $pdo = new PDO( 'mysql:dbname=ryorar;host=127.0.0.1;charset=utf8mb4', 'viewers', 'Mypass1!', [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, ] ); //ここでは、アタッカーのyokai_dataDBから手に入る変数を入れる 1をpost atkIdに変える $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id'); $stmt->bindValue(':id', $atkId); $stmt->execute(); foreach($stmt as $row) { $atkStatus_a_h = (int)$row['status_a_h'];//dif $atkStatus_a_a = (int)$row['status_a_a']; $atkStatus_a_m = (int)$row['status_a_m']; $atkStatus_a_d = (int)$row['status_a_d']; $atkStatus_a_s = (int)$row['status_a_s']; $atkStatus_b_h = (int)$row['status_b_h']; $atkStatus_b_a = (int)$row['status_b_a']; $atkStatus_b_m = (int)$row['status_b_m']; $atkStatus_b_d = (int)$row['status_b_d']; $atkStatus_b_s = (int)$row['status_b_s']; $atkSkill = $row['skill_name'];//dif $weapon_a = $row['weapon_a'];//none $weapon_m = $row['weapon_m'];//none $atkName = $row['yokai_name'];//dif $atkVisu = $row['visu'];//dif $spe_type = $row['spe_type'];//none $spe_damage = (int)$row['spe_damage']; $spe_num = (int)$row['spe_num']; $spe_name = $row['spe_name']; } $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');//ここは、weaponaゾーン difは必要ないのだ $stmt->bindValue(':wea', $weapon_a); $stmt->execute(); foreach($stmt as $row) { $weapon_a_dam = (int)$row['damage'];//武器のデータはatkの特権 $weapon_a_num = (int)$row['num'];//idじゃなくってさっき手に入れたデータをwhereにしないといけない } $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');//ここはweaponmゾーン $stmt->bindValue(':wea', $weapon_m); $stmt->execute(); foreach($stmt as $row) { $weapon_m_dam = (int)$row['damage']; $weapon_m_attribute = $row['attribute_type']; $weapon_m_heal = (int)$row['heal']; } //したからdifゾーンだぞ $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id'); $stmt->bindValue(':id', $difId); $stmt->execute(); foreach($stmt as $row) { $difStatus_a_h = (int)$row['status_a_h'];//dif $difStatus_a_a = (int)$row['status_a_a']; $difStatus_a_m = (int)$row['status_a_m']; $difStatus_a_d = (int)$row['status_a_d']; $difStatus_a_s = (int)$row['status_a_s']; $difStatus_b_h = (int)$row['status_b_h']; $difStatus_b_a = (int)$row['status_b_a']; $difStatus_b_m = (int)$row['status_b_m']; $difStatus_b_d = (int)$row['status_b_d']; $difStatus_b_s = (int)$row['status_b_s']; $difSkill = $row['skill_name'];//dif $difName = $row['yokai_name'];//dif $difVisu = $row['visu'];//dif } $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); $weaponArray =array($weapon_a_dam,$weapon_a_num,$weapon_m_dam,$weapon_m_attribute,$weapon_m_heal); $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); $combinedArray =array_merge($atkArray, $difArray, $weaponArray); //ここでデータreturnしてますね... //$combinedArray_json = json_encode( $combinedArray ); $combinedArray_json = json_encode($combinedArray,JSON_UNESCAPED_UNICODE); return $combinedArray_json; $pdo =null; } catch (PDOException $e) { header('Content-Type: text/plain; charset=UTF-8', true, 500); exit($e->getMessage()); } catch (PDOException $e) { // エラーが発生した場合は「500 Internal Server Error」でテキストとして表示して終了する // - もし手抜きしたくない場合は普通にHTMLの表示を継続する // - ここではエラー内容を表示しているが, 実際の商用環境ではログファイルに記録して, Webブラウザには出さないほうが望ましい header('Content-Type: text/plain; charset=UTF-8', true, 500); exit($e->getMessage()); } } $func = $_POST['func']; $atk_name= $_POST['atkId']; $dif_name= $_POST['difId']; echo $func($atk_name,$dif_name); ?> (sample.html) <!DOCTYPE html> <html lang="jp"> <head> <title>サンプルページ</title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <!-- ここからHTMLでマークアップする --> <!-- JQeryを読み込む --> <!--<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- 自分で作成したJavaScriptを読み込む --> <script src="demo.js"></script> <div id="element"></div> <div id="element2"></div> </body> </html>
RyojiAraki

2021/11/14 19:20

それも、配列を送った時限定です 変数は通常通り送られます
m.ts10806

2021/11/14 20:57

あのですからミニマムコードで、と。
RyojiAraki

2021/11/14 20:58

これミニマムのつもりなんです、すみませんm(_ _)m あと、nullの原因は読み込みエラーでした お騒がせしました
m.ts10806

2021/11/14 21:13 編集

・DBアクセス書いてる ・同じブロック内に } catch (PDOException $e) { 二連発そのまま の時点でかなり組み込まれてるコードに見えますが。 無駄なロジック組まずに返したいデータを固定で返すのがミニマムです。 なのでPHP側はおおよそ1行で良い。 ミニマムなので「返したいデータを作る過程」は不要なのです。
RyojiAraki

2021/11/14 21:15

なるほどです! 余分な要素を削ぎ落とすと認識していました...精進します! ありがとうございます(*´∀`*)
m.ts10806

2021/11/14 21:16

>余分な要素を削ぎ落とすと 余分なPDOException が落とされていません。
RyojiAraki

2021/11/14 21:17

しまった.../(^o^)\
m.ts10806

2021/11/14 21:34

ミニマムコードで試してみると明白です。 <?php try{ throw new PDOException("a"); }catch(PDOException $e){ echo 1; }catch(PDOException $e){ echo 2; } 1しか出力されません。 ちなみにJavaではそもそもコンパイルが通らない不正な実装です。
RyojiAraki

2021/11/15 09:34

確かに...なんで付けてたんだ笑 あと、illegal invocationの原因がわかりました!getElementByIdのあたりでミスがあったと思われます! (ミニマムコードで試したらエラーが起きた) これはあくまで経過報告なので自己解決するので気にしないでください!
RyojiAraki

2021/11/16 11:21

ありがとうございました!!
guest

0

実行フィールドのtype属性をsubmitにしてみてください。

この部分を

html

1<input type="button" value="実行" name="s" id="label1" onclick="changeframe_blue();" >

こう

html

1<input type="submit" value="実行" name="s" id="label1" onclick="changeframe_blue();" >

投稿2021/11/12 01:21

KAOsaka

総合スコア531

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/11/12 01:44

質問者に確認中なので、タイトルと内容からの単なる想像ですが、submitせずにPHPとやり取りしたいからあえてbuttonにしてるような気がしないでもないです。
RyojiAraki

2021/11/12 08:50

教えて頂きありがとうございます! submitに変更したら上手くphpを呼べました! しかし、今回はjsに記載したgetValue関数を読み込めなかったそうです... Ajaxとか試してみるので少々お待ちください! 出来れば画面遷移(?)はなしで進めたいので!
guest

0

javascript

1}).fail(

の上の行にある})が余分なのでは?

投稿2021/11/15 09:45

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問