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

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

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

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

JavaScript

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

Ajax

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

Q&A

1回答

957閲覧

ajaxとPHPの変数のやりとり

DUNK

総合スコア13

PHP

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

JavaScript

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

Ajax

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

0グッド

1クリップ

投稿2019/05/03 04:27

編集2022/01/12 10:55

前提・実現したいこと

初心者なのでつたないところなどあるかもしれませんがよろしくお願いします。
簡単なフォームを作成しているのですが、その中でajaxでフォーム内容を送信しPHPで処理をしたあと、その処理をした値をajax内の通信成功時の部分に返して、その値を使うというものを作成しています。

ネットで調べてみて色々なサイトを見ながら作ってみて取りあえずJSON形式で受け渡しをするのが一番良いかと考え以下のようなコードを書いてみました。

該当のソースコード

javascript

1$('#ajaxForm').submit(function(event){ 2 $.ajax({ 3 type: "POST", 4 url: location.href, 5 data:JSON.stringify({ 6 "target": $("target").val(), 7 "title": $("title").val(), 8 "emailContent": $("emailContent").val(), 9 }), 10 contentType: 'application/json', 11 success: function(response) { 12 // ajax通信成功時の処理 13 14 qrurl = JSON.parse(response); 15 console.log(qrurl); 16 console.log("ok"); 17 }, 18 error: function(xhr, status, error) { 19 // ajax通信成失敗の処理 20 console.log("miss" + xhr.status); 21 } 22 }); 23 return false; 24 });

PHP

1<?php 2$filename = md5(uniqid(rand(), true)).'.html'; 3$to = $_POST['target']; 4$title = $_POST['title']; 5$body = nl2br($_POST['emailContent']); 6$truebody =str_replace("<br />","%0D%0A",$body); 7if(!empty($to)) { 8 $fp = fopen("${dir}${filename}" , "a"); 9 fwrite($fp, "<a href='mailto:${to}?subject=${subject}&body=${truebody}'>メールの送信はこちら<a>"); 10 $url = "https://******:/${filename}"; 11 header('Content-Type: application/json; charset=utf-8'); 12 echo json_encode($url); 13} 14?>

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

Uncaught SyntaxError: Unexpected token < in JSON at position 0

ajax内での通信および、PHP内の処理はうまくいっているようなのですが、PHPからajaxに値を返すことがどうしてもできず上記のようなエラーメッセージが出てしまいました。

ヒント、参考になるページなどご提示いただけたら幸いです。

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

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

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

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

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

guest

回答1

0

要因としてはおそらくJSON以外の出力があること。エラーログ確認してみてください。
あとは下記

js

1 data:JSON.stringify({ "target": $("target").val(), "title": $("title").val(), "emailContent": $("emailContent").val(), }),

ajaxのオプションであるdataはキー:値のオブジェクトをそのまま送れば良いのでstringifyする必要がないですしjQuery$(要素)は.や#がないとそういう名称のhtmlタグを探しにいきます。
htmlの提示がないので実際はどのように指定されているか分からないですが、classであれば.title、idであれば#titleのように指定してください。

投稿2019/05/03 04:43

m.ts10806

総合スコア80765

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

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

DUNK

2019/05/03 05:11 編集

ご回答ありがとうございます。 厚かましいのですがいくつか質問がございます。 ・エラーログの確認はコンソールからの確認であってますか? ・datatypeをjsonにするだけだと通信失敗の方にいってしまってstringfyしないとjson形式で送れない状況になってしまっています。stiringfyしない場合datatypeをfalseにしないとPHPがちゃんと実行されません。このような場合の対処も教えていただけると助かります。
m.ts10806

2019/05/03 06:36

エラーログはサーバーのログです。ajaxなのでphpのデバッグ出力を画面にエラー出すわけには行かないので自分でログファイルに書き出すかサーバーのエラーログを確認するか、ajaxからの返却値に含ませることになります。 いずれにしてもphp側でエラーになっているのは間違いなさそうです。 dataTypeは「json」等だと思いますが… http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/ 通常はdataに連想配列(オブジェクト)をセットするだけでいいはずですよ。私はこれまでstringifyかけたことはないです。
DUNK

2019/05/03 08:34

何度も申し訳ありません。確認したらresponse部分にhtmlがそのまま返ってきてしまっているようで、それがエラーの原因かと…?こういったものはエラーログで確認して対処するしかないですよね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問