Q&A
デベロッパツールのConsoleではなくNetworkでレスポンスの生データを質問に追記してください。
あと、PHPへ直打ちですがURLは以下のようになっていますか？
https://.../wp-content/themes/テーマ名/.../sendmail.php
もしくはリクエスト先のPHPはWordPress管理外でしょうか？
WordpressにてAjax通信で行うフォームを作成しています。
PHP、Ajaxのみでちゃんと動作するプログラムを組んで、それをWordpressに移植しようとしたらなぜかパースエラーになりフォームからの値をAjax送信先であるPHPファイル（sendmail.php）に渡せません。
どの型で返すかを sendmail.phpにContent-Type追記で指定しましたが同じエラーのままで解決できませんでした。
ajaxの設定にあるtypeを'json'から'text'に変えてみましたが、doneには入るが送信はされず、、
PHPファイルに挿入されているvar_dumpも一応全てコメントアウトしてみましたがだめでした。
他に見るべき場所、致命的な間違い等あれば教えていただけると助かります。
JS
function form() { $('.contact-form').submit(function(e) { //フォームの既定の動作をキャンセルする e.preventDefault(); //フォームの入力値を変数に格納する let form_data = $('form').serialize(); if (!valid()) { //バリデーションに引っ掛かった場合 return false; } else { myRet = confirm("送信しますか"); if ( myRet == true ){ //フォームの入力内容をajaxにより送信する $.ajax ({ url: '../../sendmail.php',//送信先のURL type: 'POST',//POST送信 data: form_data, dataType: "json", timeout: 60000, processData: false, contentType: false, }).done(function (data, textStatus, jqXHR) { //通信成功時の処理 alert("送信しました"); $('form')[0].reset();//フォームに入力している値をリセット }).fail(function (jqXHR, textStatus, errorThrown) { console.log(form_data); console.log("XMLHttpRequest : " + jqXHR.status); console.log("NG:" + textStatus.status); console.log("textStatus : " + textStatus); console.log("errorThrown : " + errorThrown.message); //通信失敗時の処理 alert("送信に失敗しました"); }); }else{ alert("キャンセルしました"); } } }); }
sendmail.phpの頭に
header('Content-Type: application/json; charset=utf-8');
を追記してもだめでした。
エラー項目↓
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
追記しました
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
sendmail.php <?php // ini_set('display_errors',1); header('Content-Type: application/json; charset=utf-8'); session_start(); echo "sendmail"; // var_dump("sendmail"); //このページに直接アクセスした場合は拒否する if(!isset($_POST['token'])) { echo '不正なアクセスの可能性があります'; exit; } //キーとトークンが一致したら管理者に入力内容がメールで送られる if($_SESSION['key'] === $_POST['token']) { $name = $_POST['name']; $email = $_POST['email']; $comment = $_POST['comment']; $from = "XXX@gmail.com"; //メールの送り先 $to = $_POST['email']; //メールの件名 $subject = $name . 'さんからの入力フォームでの送信です'; //メール本文 $content = '名前:' . $name . "\r\n\r\n" . 'メールアドレス:' . $email . "\r\n\r\n" . '内容:' . $comment; //メールヘッダー $header = 'From: ' . mb_encode_mimeheader($name). ' <' . $email. '>'; //文字化け対策 mb_language('ja'); mb_internal_encoding('UTF-8'); if(mb_send_mail($to, $subject, $content, $header)) { echo '送信しました'; } else { echo '送信に失敗しました'; } } else { echo 'キーとトークンが一致しません'; } mb_send_mail('XXX@gmail.com', 'お客様よりお問い合わせがありました', $comment, $name);
生データ？を取得するコードをヘッダーに挿入しました。NULLと表示されていてます・
$json = file_get_contents("php://input"); $contents = json_decode($json, true); var_dump($contents);
Networkのステータス
sendmail.phpの中身が気になりますね。PHPはそのまま変数を返せないです。
レスが遅くなり申し訳ありません。
>>tabuuさん
生データとは $json = file_get_contents("php://input"); で取得するやつでしょうか？
確認したらnullでした、画像一応添付しました。
URLは記載されているパスの形ですのでWP管轄内です。
/MAMP/htdocs/テーマ名/wp-content/themes/テーマ名/sendmail.php
>>FKMさん
sendmail.phpの内容を一応記載しました。
送り先のPHPにheader('Content-Type: application/json; charset=utf-8');でレスポンス形式をJSONにしないといけないということですかね？
この文言を挿入してもパースエラーのままでした。
sendmail.phpの内容としてはメール内容の整形とmb_send_mailくらいです。
生データはChromeのデベロッパーツールでNetworkタブを開いた状態で送信ボタンを押すと新たに
sendmail.phpというエントリが追加されるはずです。
Headersでリクエストとレスポンスのヘッダーや送信しているPOST値、
Responseでレスポンス値が確認できるので想定通りがご確認ください。
ただ、パースエラーというのはPHP側でテキストをechoしているところを
JSONフォーマットでechoすれば解消するような感じはします。
networkの部分を確認したらAJAX送信先であるsendmail.phpに入ってはいることを確認できました。
ただ、responseタブを見たらsendmail.php内のトークンの部分で引っかかっていて送信部分に入れていないのが原因っぽいので調べつつやってみようと思います。
いろいろ教えてくださりありがとうございます！
if(!isset($_POST['token'])) {
echo '不正なアクセスの可能性があります';
exit;
}
回答1件
0
ベストアンサー
Ajaxの基本に関わる問題ですね。echoやprintといったレスポンス用の関数は
一回しか使えませんよ。そしてそれが使われた時点でそれをレスポンスとして返してしまいます。
それなのにdatatypeをjsonに指定しているため、json_encodeしていない値を返すためエラーを起こしているわけです。
なので、エラーメッセージはPHP上に記載してはいけません。
Ajaxを用いる際のPHPではechoで返せるのは一回のみ、しかもそれはjson指定ならjson_encodeでしか返せない、それを頭にたたき込んでおきましょう。
投稿2021/04/10 06:00
総合スコア3633
あなたの回答
tips
プレビュー
