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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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アプリケーションを実現することができます。

解決済

jqueryでAjaxを使い、PHPのJSON形式で送りたい

hima-mura.
hima-mura.

総合スコア42

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アプリケーションを実現することができます。

1回答

0評価

1クリップ

154閲覧

投稿2022/06/22 11:20

編集2022/06/23 14:20
//sample.tpl <header> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </header> <div class="try_ajax"> <h1>Ajaxお試し</h1> <p>IDを入力してください:<input type="text" id="main"><button id="send">送信</button></p> <div id="return"></div> </div> <script> $(function(){ $('#send').on('click',function(event){ var data_id= {ldelim}'id':$('#main').val(){rdelim}; // var data_id= {'id':$('#main').val()}と同意。 alert(data_id.id); // テイストボックスに打ち込んだ文字(japan1)が表示される。 $.ajax({ type: 'POST', url: url, data: data_id, dataType: 'json' }).done(function(data){ alert(data); $('#return').append('<p>'+data.id+':'+data.school+':'+data.skill+'</p>'); }).fail(function(XMLHttpRequest,status,e){ alert(e); }).always(function(){ alert('Finish Ajax.'); }) }) }) </script> // sample.php $id= $_POST['id']; // null を返す $ajax_list= array('id'=> $id, 'school'=> 'japan', 'skill'=> 'programming'); echo json_encode($ajax_list); // header('Content-type: application/json; charset=UTF-8');

Smartyのテンプレートで構成されているサイトに、初めてAjaxを使おうとし、試しの上記のコードを実行したら「SyntaxError: Unexpected token < in JSON at position 50」を吐きました。参考にしたサイトは,https://techacademy.jp/magazine/37062 。
になります。変数data_idはJSON形式であると思うのですが、どうしてこんなエラーを吐くかわかりません。あと、PHPの「header('Content-type: application/json; charset=UTF-8');」の部分を実行すると画面がhtmlのheaderのコード文字が表示され、UIが全く表示されなくなるのでなくなくコメントアウトしています。
試したことは、
・dataTypeを「'json'」から「'text'」に変更すると、done()部分が実行され、「alert(data)」の部分は「{"id":"japan1","school":"japan","skill":"programming"}<html>

<head><meta>...(以下略)」 になりました。また、「$('#return').append('<p>'+data.id+':'+data.school+':'+data.skill+'</p>');」のところは「undefined:undefined:undefined」と画面に表示されました。

・マニュアルにdataのTypeはPlainObject、String、Arrayとなっていたので、「var data_id= {ldelim}'id':$('#main').val(){rdelim}; 」を「var data_id=[ {ldelim}'id':$('#main').val(){rdelim}]; 」に変更しましたが、同じく「SyntaxError」を吐きました。
他の方の環境では問題なく動くのでしょうか?Smartyを使用しているのが参考サイト通りの挙動をしない原因なのでしょうか?助言をお願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

tabuu

2022/06/22 23:20

sample.phpはjsonをechoした後にhtmlを出力するようになっていませんか? もしくはphpのエラーで500エラー等のhtmlが自動で出力されていませんか?
hima-mura.

2022/06/23 04:43

大変申し訳なく意味を意図をかみ切れてないのですが、 echoでjsonをJSに送信した後にheader('Content-type: application/json; charset=UTF-8');を記述するとhtml部分のhead部分のコードが出力されるのですが、これって設定で出力を変えたりできるということですか?
tabuu

2022/06/23 05:20

echoしたあとにheader関数を使っているのでエラーになって500エラーのhtmlが自動で表示されているのかもしれません。 echoの前にheader関数を使ってみてください。(headerでContentTypeを変更しなくても問題ないとは思うのですが) ちなみにブラウザのurl欄にsample.phpのurlを入力するとどのように表示されますか? GETとPOSTの違いはありますが何かヒントになるかも。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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アプリケーションを実現することができます。