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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

1回答

1533閲覧

Ajaxでphpファイル(問い合わせ用)を外部ファイルとして読み込んだ時、確認ボタンで404エラー(Not Found)が出てしまう。

espil

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2020/07/28 07:07

phpファイルで作成したお問合せフォームがあり、単独で開けばメール送信までうまく機能しますが、index.htmlにそのphpファイルをAjaxで外部ファイルとして読み込んだ時、送信ボタン選択後の404エラー(Not Found)が出るのを回避したい。

PHPでお問合せフォームを作成しています。
項目記入後、確認をクリックすると、戻るor送信を選択するように実装しており、phpファイル単独で開けばうまく送信完了までいきますが、
index.htmlのcontactページへajaxで外部phpファイルとしてを読み込すると以下エラーに当たってしまいました。

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

項目記入後、確認をクリックすると送信完了までいけず、エラーとなる。

404エラー(Not Found)

該当のソースコード

php

1<?php 2session_start(); 3$mode = 'input'; 4$errmessage = array(); 5file_put_contents("./testlog.log",print_r($_POST,true)); 6if( isset($_POST['back']) && $_POST['back'] ){ 7 // 何もしない 8} else if( isset($_POST['confirm']) && $_POST['confirm'] ){ 9 // 確認画面 10 if( !$_POST['fullname'] ) { 11 $errmessage[] = "名前を入力してください"; 12 } else if( mb_strlen($_POST['fullname']) > 100 ){ 13 $errmessage[] = "名前は100文字以内にしてください"; 14 } 15 $_SESSION['fullname'] = htmlspecialchars($_POST['fullname'], ENT_QUOTES); 16 17 if( !$_POST['email'] ) { 18 $errmessage[] = "Eメールを入力してください"; 19 } else if( mb_strlen($_POST['email']) > 200 ){ 20 $errmessage[] = "Eメールは200文字以内にしてください"; 21 } else if( !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ){ 22 $errmessage[] = "メールアドレスが不正です"; 23 } 24 $_SESSION['email'] = htmlspecialchars($_POST['email'], ENT_QUOTES); 25 26 if( !$_POST['message'] ){ 27 $errmessage[] = "お問い合わせ内容を入力してください"; 28 } else if( mb_strlen($_POST['message']) > 500 ){ 29 $errmessage[] = "お問い合わせ内容は500文字以内にしてください"; 30 } 31 $_SESSION['message'] = htmlspecialchars($_POST['message'], ENT_QUOTES); 32 33 if( $errmessage ){ 34 $mode = 'input'; 35 } else { 36 $token = bin2hex(mcrypt_create_iv(32, MCRYPT_DEV_URANDOM)); // php5のとき 37 //$token = bin2hex(random_bytes(32)); // php7以降 38 $_SESSION['token'] = $token; 39 $mode = 'confirm'; 40 } 41} else if( isset($_POST['send']) && $_POST['send'] ){ 42 // 送信ボタンを押したとき 43 if( !$_POST['token'] || !$_SESSION['token'] || !$_SESSION['email'] ){ 44 $errmessage[] = '不正な処理が行われました'; 45 $_SESSION = array(); 46 $mode = 'input'; 47 } else if( $_POST['token'] != $_SESSION['token'] ){ 48 $errmessage[] = '不正な処理が行われました'; 49 $_SESSION = array(); 50 $mode = 'input'; 51 } else { 52 $message = "お問い合わせを受け付けました \r\n" 53 . "名前: " . $_SESSION['fullname'] . "\r\n" 54 . "email: " . $_SESSION['email'] . "\r\n" 55 . "お問い合わせ内容:\r\n" 56 . preg_replace( "/\r\n|\r|\n/", "\r\n", $_SESSION['message'] ); 57 mail( $_SESSION['email'], 'お問い合わせありがとうございます', $message ); 58 mail( 'uemura@hoge.com', 'お問い合わせありがとうございます', $message ); 59 $_SESSION = array(); 60 $mode = 'send'; 61 } 62} else { 63 $_SESSION['fullname'] = ""; 64 $_SESSION['email'] = ""; 65 $_SESSION['message'] = ""; 66} 67?> 68<!DOCTYPE html> 69<html lang="ja"> 70<head> 71 <meta charset="utf-8"> 72 <title>Contact</title> 73<link href="../CSS/contact.css" rel="stylesheet" type="text/css"> 74</head> 75<body> 76<?php if( $mode == 'input' ){ ?> 77 <!-- 入力画面 --> 78 <?php 79 if( $errmessage ){ 80 echo '<div class="alert alert-danger" role="alert">'; 81 echo implode('<br>', $errmessage ); 82 echo '</div>'; 83 } 84 ?> 85 <form action="./contact.php" method="post"> 86 名前 <input type="text" name="fullname" placeholder="Name" value="<?php echo $_SESSION['fullname'] ?>" class="feedbackinput"><br> 87 Eメール <input type="email" name="email" placeholder="Email" value="<?php echo $_SESSION['email'] ?>" class="feedbackinput"><br> 88 お問い合わせ内容<br> 89 <textarea cols="40" rows="8" name="message" placeholder="Comment" class="feedbackinput"><?php echo $_SESSION['message'] ?></textarea><br> 90 <div class="button"> 91 <input type="submit" name="confirm" value="確認" class="btn btn-primary btn-lg"/> 92 </div> 93 </form> 94<?php } else if( $mode == 'confirm' ){ ?> 95 <!-- 確認画面 --> 96 <form action="./contact.php" method="post"> 97 <input type="hidden" name="token" value="<?php echo $_SESSION['token']; ?>"> 98 名前 <?php echo $_SESSION['fullname'] ?><br> 99 Eメール <?php echo $_SESSION['email'] ?><br> 100 お問い合わせ内容<br> 101 <?php echo nl2br($_SESSION['message']) ?><br> 102 <input type="submit" name="back" value="戻る" class="btn btn-primary btn-lg"/> 103 <input type="submit" name="send" value="送信" class="btn btn-primary btn-lg"/> 104 </form> 105<?php } else { ?> 106 <!-- 完了画面 --> 107 送信しました。お問い合わせありがとうございました。<br> 108<?php } ?> 109</body> 110</html>

該当のソースコード

jQuery

1index.js(ajax) 2 3$(function(){ 4 //ページを表示させる箇所の設定 5 var $content = $('.pageDisplay'); 6 //ボタンをクリックした時の処理 7 $(document).on('click', '#type5 a',function(event) { 8 event.preventDefault(); 9 //.menu aのhrefにあるリンク先を保存 10 var link = $(this).attr("href"); 11 //リンク先が今と同じであれば遷移しない 12 if(link == lastpage){ 13 return false; 14 }else{ 15 $content.fadeOut(600, function() { 16 getPage(link); 17 }); 18 //今のリンク先を保存 19 lastpage = link; 20 } 21 22 }); 23 //初期設定 24 getPage("home/home.html"); 25 var lastpage = "home/home.html"; 26 27 //ページを取得してくる 28function getPage(elm){ 29 $.ajax({ 30 type: 'GET', 31 url: elm, 32 dataType: 'html', 33 }).done(function (data) { 34 $content.html(data).fadeIn(600); 35 }).fail(function (data){ 36 alert('問題がありました。'); 37 }); 38 } 39}); 40

該当のソースコード

html

1index.html 2 3 <nav id="type5" ontouchstart=""> 4 <ul> 5 <li><a href="home/home.html">Home</a></li> 6 <li><a href="about/about.html">About</a></li> 7 <li><a href="works/works.html">works</a></li> 8 <li><a href="contact/contact.php">Contact</a></li> 9 </ul> 10 </nav> 11 <div id="particles-js"></div> 12 <main id="top"> 13 <div class="pageDisplay"></div> 14 </main>

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

jQuery 3.4.1
サーバー:エックスサーバー
PHP 7.3.x

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

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

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

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

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

guest

回答1

0

Not Foundなのですから指定したurlが存在しないだけです

投稿2020/07/28 07:09

yambejp

総合スコア114784

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問