ajax通信の戻り値がソースコードになってしまう

実現したいこと

ajax通信を利用してフォームデータをPOSTで受け渡し、ログイン機構を実装する

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

ajaxの戻り値がHTMLのソースコードで出力されてしまいます

該当のソースコード

フォルダ配置

ルートフォルダ
 |
 |--ucp
 |   |--index.html
 |   |--contents.php
 |   |--login
 |        |--login.php(入力フォーム等)
 |        |--script-login.php(jsファイルとして)
 |        |--server-login.php(DBとの通信,フォームの入力チェック)
 |
 |--assets

script-login.php

javascript
1<script type="text/javascript">
2	$(function(){
3		//ログインボタンを押した時の動作
4		$('#send').click(function(){
5			//二重送信防止のためログインボタンの無効化
6			$('#send').prop('disabled', true);
7
8			//ajax通信するデータを作成
9			var userData = {
10				mail: $('#mail').val(),
11				pass: $('#pass').val(),
12				token: $('#token').val()
13			};
14
15			//ajax通信
16			$.ajax({
17				type: 'POST',
18				url: './login/server-login.php',
19				data: userData
20			}).done(function(data){
21				if(data == 'xsrf'){
22					alert('エラーが発生しました。もう一度やり直してください。');
23					location.href="/index.html";
24					return false;
25				}
26				$('.caution-words').addClass('hide');
27				if(data.indexOf('no-mail')>-1){
28					$('.no-mail').removeClass('hide');
29				}else if(data.indexOf('not-address')>-1){
30					$('.not-address').removeClass('hide');
31				}
32				if(data.indexOf('no-pass')>-1){
33					$('.no-pass').removeClass('hide');
34				}else if(data.indexOf('different')>-1){
35					$('.different').removeClass('hide');
36				}
37				$('#send').prop('disabled', false);
38			}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
39				alert('error!!!');
40				console.log("XMLHttpRequest : " + XMLHttpRequest.status);
41				console.log("textStatus     : " + textStatus);
42				console.log("errorThrown    : " + errorThrown.message);
43			}).always(function(data) {
44				console.log(data);
45			});
46			
47		})
48	})
49</script>

server-login.php

php
1<?php
2
3session_start();
4if($_SESSION['token'] != $_POST['token']):
5    print('xsrf');
6    return;
7endif;
8header('X-FRAME-OPTIONS: SAMEORIGIN');
9$webroot = $_SERVER['DOCUMENT_ROOT'];
10include_once($webroot."/src/common/function.php");
11$dbh = getDbh();
12
13$mail = $_POST['mail'];
14$pass = $_POST['pass'];
15
16//入力データチェック
17$check = 'check';
18if($mail == ''):
19    $check .= 'no-mail';
20elseif(!filter_var($mail, FILTER_VALIDATE_EMAIL)):
21    $check .= 'not-address';
22endif;
23if($pass == ''):
24    $check .= 'no-pass';
25endif;
26if($check != 'check'):
27    p($check);
28    return;
29endif;
30
31$sql = "SELECT * FROM users WHERE mail = :mail";
32$stmt = $dbh->prepare($sql);
33$stmt->bindValue(':mail', $mail);
34$stmt->execute();
35$result = $stmt->fetch(PDO::FETCH_ASSOC);
36
37if(empty($result)):
38    $check .= 'different';
39endif;
40if($check != 'check'):
41    p($check);
42    return;
43endif;
44//指定したハッシュがパスワードにマッチしているかチェック
45if(password_verify($pass, $result['pass'])):
46    //DBのユーザー情報をセッションに保存
47    $_SESSION['userID'] = $result['userID'];
48    $_SESSION['username'] = $result['username'];
49    p('success');
50else:
51    p('different');
52endif;
53?>

自己推測

ajaxのurlパラメータが取得できてない？
別階層のフォルダ(assets)にserver-login.phpを移動し、移動先をajaxのurlで指定するとうまく動作した。
同じフォルダに置いておきたいのですが、ajaxの仕様的に問題がある？ボールドテキスト

バージョン

php v8.2.4
jquery v3.2.1 min

コンソールログ表示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>タイトル</title>
{head}
<div class="body">
		<form class="sign-body">
	<div class="sign-heading">ログイン</div>
	<table class="sign-table">
		<tbody>
			<!-- メールアドレス -->
			<tr>
				<td class="table-cap"><i class="fa-regular fa-envelope"></i>メールアドレス</td>
				<td><input type="text" id="mail"></td>
			</tr>
			<tr>
				<td class="caution-words no-mail hide" colspan="2">メールアドレスが入力されていません</td>
				<td class="caution-words different-mail hide" colspan="2">メールアドレスが違います</td>
				<td class="caution-words not-address hide" colspan="2">正しいメールアドレスを入力してください</td>
			</tr>
			<!-- パスワード -->
			<tr>
				<td><i class="fa-solid fa-key"></i>パスワード</td>
				<td><input type="password" id="pass"></td>
			</tr>
			<tr>
				<td class="caution-words no-pass hide" colspan="2">パスワードを入力してください</td>
				<td class="caution-words different hide" colspan="2">メールアドレスまたはパスワードが違います</td>
			</tr>
			<tr>
				<td class="table-cap"></td>
				<td>
					<a href="">パスワードをお忘れですか？</a>
				</td>
			</tr>
			<!-- トークン -->
			<input type="hidden" id="token" value="vTHSGG1eBUVwrF+EK5OoPBcUr+Wa+pRd0safZ1LAL/k=">
			<tr>
				<td class="table-cap"></td>
				<td>
					<input type="submit" id="send" value="ログイン">
				</td>
			</tr>
		</tbody>
	</table>
</form><script type="text/javascript">
	$(function(){
		//ログインボタンを押した時の動作
		$('#send').click(function(){
			//二重送信防止のためログインボタンの無効化
			$('#send').prop('disabled', true);

			//ajax通信するデータを作成
			var userData = {
				mail: $('#mail').val(),
				pass: $('#pass').val(),
				token: $('#token').val()
			};
			//ajax通信
			$.ajax({
				type: 'POST',
				url: './login/server-login.php',
				data: userData
			}).done(function(data){
				if(data == 'xsrf'){
					alert('エラーが発生しました。もう一度やり直してください。');
					location.href="/index.html";
					return false;
				}
				$('.caution-words').addClass('hide');
				if(data.indexOf('no-mail')>-1){
					$('.no-mail').removeClass('hide');
				}else if(data.indexOf('not-address')>-1){
					$('.not-address').removeClass('hide');
				}
				if(data.indexOf('no-pass')>-1){
					$('.no-pass').removeClass('hide');
				}else if(data.indexOf('different')>-1){
					$('.different').removeClass('hide');
				}
				$('#send').prop('disabled', false);
			}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
				alert('error!!!');
				console.log("XMLHttpRequest : " + XMLHttpRequest.status);
				console.log("textStatus     : " + textStatus);
				console.log("errorThrown    : " + errorThrown.message);
			}).always(function(data) {
				console.log(data);
			});
			
		})
	})
</script>	</div>
		
{footer}
</body></html>

yambejp

2023/07/28 04:32

＞ajaxの戻り値がHTMLのソースコードで出力されてしまいますの意味がわかりません。具体的にどういうソースが戻ってきているのでしょうか？

kuregumo

2023/07/28 04:42

ajax通信後に戻ってきたデータを確認するためコンソールログに表示しているのですが、sever-login.phpの実行結果でもエラーコードでもなく、ページ全体のHTMLが戻り値として表示されます。

Lhankor_Mhy

2023/07/28 04:46

pには何が入っているんですか？

kuregumo

2023/07/28 05:02 編集

説明不足ですみません。pはprintです。p関数を使ってないprintは消し忘れです。 server-login.phpの最後のp関数はajaxの戻り値設定です

Lhankor_Mhy

2023/07/28 05:15

『ajaxの戻り値設定』とは具体的にはなにをしている関数ですか？

hoshi-takanori

2023/07/28 05:16

script-login.php と server-login.php が同じフォルダにあるなら、 url: './server-login.php', で良いのでは…。

kuregumo

2023/07/28 05:20

ajaxの戻り値はserver-login.phpでprintされた値のことです ./server-login.phpでも試しました。絶対パスでも試しました

Lhankor_Mhy

2023/07/28 05:20

あ、カレントは index.html じゃないんだ。そっちはモジュールかと思ってた。

Lhankor_Mhy

2023/07/28 05:46 編集

プレースホルダらしきものもあるし、何かのフレームワークを使っているような感じを受けますね…… ルーティングの影響のような印象があります。

kuregumo

2023/07/28 06:36

いろいろなサイト・ブログを参考に進めていますが、フレームワークは（多分）使用してないです。laravelもっ未導入です

Lhankor_Mhy

2023/07/28 06:47

URLのルーティングもしてないですか？

kuregumo

2023/07/28 06:52

ルーティングを調べてきました。あのような操作は行なってなかったです

Lhankor_Mhy

2023/07/28 06:54

そうすると、このajaxのリクエストをするページのURLは /ucp/login/script-login.php で合っていますか？

kuregumo

2023/07/28 07:00

/ucp/login/server-login.phpです ./login/server-login.phpも試しました。というかこっちが正解ですかね。症状変わらずでした

Lhankor_Mhy

2023/07/28 07:05 編集

え、ではURL間違ってませんか？　自分自身に ajax リクエストを発行しているんですよね？

Lhankor_Mhy

2023/07/28 07:07

あ、リクエスト先のURLを聞いているように読めるのか。 /ucp/login/script-login.php から ajax リクエストを /ucp/login/server-login.php 宛てに発行している、ということでいいんですよね？

kuregumo

2023/07/28 07:15

ajaxの発信元のファイルという意味だったんですね。すみません。上記の認識で大丈夫です

Lhankor_Mhy

2023/07/28 07:18 編集

ご提示いただいている script-login.php のコードは抜粋ですよね？ server-login.php は全部ですか？

kuregumo

2023/07/28 07:20

両方全部です。。。なにが足りないのでしょう。。。

Lhankor_Mhy

2023/07/28 07:22

script-login.php があれで全部ということはないですよね？あれだけだとフォーム部品がないので。

kuregumo

2023/07/28 07:26

フォーム部分はlogin.phpの中にあります index.htmlでcontents.phpを読み込み、contents.phpでlogin.phpとscript-login.phpを読み込んでいます

Lhankor_Mhy

2023/07/28 07:30

だとすると、ajax リクエスト元は /ucp/login/script-login.php ではないように思います。本当にそのURLがブラウザのアドレスバーに表示されてるか確認してみてはどうでしょうか。

kuregumo

2023/07/28 07:34

http://localhost:8080/ucp/?mode=login アドレスバーは上記ですここからリクエストが出ていると、「./login/~」でurlを取得できないのでしょうか

Lhankor_Mhy

2023/07/28 07:42

うーん、index.html はPHPだということですよね？ブラウザ上で「xsrf」を表示させることはできますか？その場合はどのようなURLになりますか？

kuregumo

2023/07/28 07:57

なるほど！！ rewrite engin でucpをすべてindex.htmlに正規化してしまっていました。書き換える＝存在しないファイル＝アクセスできないという状況でした。直リンクできなければ処理も行われないはずですねありがとうございます！！！

Lhankor_Mhy

2023/07/28 07:59

やはりルーティングされていたのですね。ご解決されて何よりです。お手数ですが自己解決の処理をお願いします。

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

回答2件

自己解決

.htaccessでリライトしていたため、index.htmlとして送信していただけでした

投稿2023/08/19 06:08

kuregumo

総合スコア11

「ページ全体のHTMLが戻り値」が返ってきているならそれを読みに行っているのでしょう
Ajaxで受け取るというからにはAPIで選別してデータを受け取るのでしょうから
そういうAPIを用意する必要があるということでは？

投稿2023/07/28 05:15

yambejp

総合スコア118024

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

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

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

質問する

実現したいこと

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

該当のソースコード

自己推測

バージョン

コンソールログ表示

関連した質問