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

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

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

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

PHP

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

1回答

1789閲覧

JSのfetchで$_POSTに値を送りPHPのheaderで違うページに遷移したいがうまくいかない。

fuyukixxx

総合スコア26

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

PHP

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/04/22 11:08

モーダルフォームからログインをして違うページに遷移したいです。バリデーションエラーメッセージを実装したいのでJS側でサブミットした時モーダルフォームが消えないようにpreventDefault()で遷移しないようにしています。fetch()でPHP側に$_POSTを送りユーザとパスワードが一致したらheader()で違うページに遷移したいのですが、一致した場合、chromeのNetworkをみたら302foundがでてました。preventDefault()が原因でheader()がうまく機能してない気がします。どう対処すればページ遷移ができるでしょうか?
ご助力の方宜しくお願いします。

HTML

1コード 2 <button type="button" class="btn btn-light col-lg-12" data-toggle="modal" data-target="#Modal">ログイン</button> 3 <form action="" id="login_form" method="post"> 4 <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true"> 5 <div class="modal-dialog modal-md" role="document"> 6 <div class="modal-content"> 7 <div class="modal-header"> 8 <h5 class="modal-title col-lg-12 text-center" id="Modal">ログインする</h5> 9 </div> 10 <div class="modal-body"> 11 <?php if ($error['login'] === 'failed') : ?> 12 <span class="col-lg-12 text-center" id="valid">入力されたユーザー名やパスワードが正しくありません。</span> 13 <?php endif; ?> 14 <div class="input_area col-lg-12 text-center"> 15 <input type="text" class="border border-primary" name="user" placeholder="メールアドレスまたはユーザーネーム" maxlength="50"> 16 </div> 17 <div class="input_area col-lg-12 text-center"> 18 <input type="password" class="border border-primary" name="password" placeholder="パスワード"> 19 </div> 20 </div> 21 <div class="modal-footer "> 22 <button type="submit" class="btn btn-primary" id="login">ログインする</button> 23 </div> 24 </div> 25 </div> 26 </form>

js

1コード 2const form = document.getElementById('login_form'); 3 4 form.addEventListener('submit', (e) => { 5 e.preventDefault(); 6 const postData = new FormData(document.forms.login_form); 7 for (let setPost of postData) { 8 postData.set(setPost[0], setPost[1]); 9 console.log(setPost); 10 } 11 12 const data = { 13 method: 'post', 14 body: postData 15 }; 16 17 fetch('top.php', data) 18 .then((res) => { 19 if (res.status !== 200) { 20 throw new Error("system error."); 21 } 22 return res.text(); 23 }).then((text) => { 24 console.log(text); 25 }).catch((e) => { 26 console.log(e.message); 27 }).finally(() => { 28 console.log('done!') 29 // location.reload(); 30 }); 31 });

PHP

1コード 2session_start(); 3 4var_dump($_POST['user']); 5if ($_POST['user'] !== null && $_POST['password'] !== null) { 6 $login = $db->prepare('SELECT * FROM members WHERE user=? AND password=? OR mail=? AND password=?'); 7 $reg_str = '/^[^ ]+@[^ ]+.[a-z]{2,3}$/'; 8 //メールアドレスかユーザ名かでDBに渡す値を分岐する 9 if (preg_match($reg_str, rtrim($_POST['user']))) { 10 $login->execute(array('', sha1($_POST['password']), $_POST['user'], sha1($_POST['password']))); 11 } else { 12 $login->execute(array($_POST['user'], sha1($_POST['password']), '', sha1($_POST['password']))); 13 } 14 $user = $login->fetch(); 15 16 if ($user) { 17 $_SESSION['id'] = $user['id']; 18 $_SESSION['user'] = $user['user']; 19 $_SESSION['time'] = time(); 20 header('location: ../main.php'); 21 exit(); 22 } else { 23 $error['login'] = 'failed'; 24 } 25}

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

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

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

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

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

guest

回答1

0

phpはheaderより前に出力があると機能しません
var_dump($_POST['user']);がダメです

preventDefault()が原因でheader()がうまく機能してない

ちょっと的外れかと,fetchの結果でjs側でページ遷移したいなら
location.hrefで移動するか、form自体をsubmitすればいいでしょう

投稿2021/04/23 00:17

yambejp

総合スコア114994

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問