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

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

新規登録して質問してみよう
ただいま回答率
85.35%
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回答

1828閲覧

FuelPHPを用いてajaxの使い方がわかりません。

morfonica

総合スコア33

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クリップ

投稿2021/12/14 06:45

編集2021/12/14 15:33

前提・実現したいこと

FuelPHPを使ってLINEのようなアプリを作りたいです。
具体的には投稿フォームから送った内容を同じ画面に表示させたいです。
FuelPHP初心者です。
いろいろなサイトを参考にしているうちに自分が今何をやっているのかわからなくなりました...
何から取り掛かればいいのかわからなくなりました。
それだけでもアドバイスをいただけると幸いです。

発生しているエラー

ailed to load resource: the server responded with a status of 500 (Internal Server Error)

該当のソースコード

PHP

1views/chat.php 2 3<?php foreach($posts as $post) : ?> 4 <p class='js-regist' id="post"><?php echo Str::truncate($post->content, 200); ?></p> 5 <!-- truncate メソッド:文字列を指定した長さで切り詰める --> 6<?php endforeach; ?> 7 8<h1>フォーム送信</h1> 9<?php echo Form::open('/chat/add') ?> 10 <div class="js-get-val-content"><?php echo Form::textarea('content', Input::post('content')) ?><br></div> 11 <!-- input クラス:HTTP パラメータやサーバ変数、ユーザエージェント情報へのアクセス --> 12 <div class='load'><?php echo Form::submit('send', '送信'); ?></div> 13<?php echo Form::close(); ?> 14 15<h1>フォーム送信</h1> 16<?php echo Form::open('/chat/add') ?> 17 <div class="js-get-val-content"><?php echo Form::textarea('content', Input::post('content')) ?><br></div> 18 <!-- input クラス:HTTP パラメータやサーバ変数、ユーザエージェント情報へのアクセス --> 19 <div class='load'><?php echo Form::submit('send', '送信'); ?></div> 20<?php echo Form::close(); ?> 21 22<h1>ajax送信</h1> 23<div id='return'></div> 24<textarea id='main' name='content'></textarea><br> 25<button id='send'>送信</button>

PHP

1controller/ajax.controller 2 3<?php 4class Controller_Ajax extends Controller_Rest{ 5 6 public function post_create(){ //関数 HTTPメソッド_処理名 7 $content = $_POST['post']; //main.jsからs送信されたデータ 8 $user_id = Arr::get(Auth::get_user_id(),1); 9 // Auth::get_user_id() : ログイン中のユーザーIDを取得。 10 // 注意点がありこのメソッドの戻り値はドライバ名とユーザーIDの配列。 11 $array = array("content" => $content, "user_id" => $user_id); 12 header("Content-type: application/json; charset=UTF-8"); 13 // 指定しないと、text/html型で処理される 14 // JSONデータを処理することを指定 15 $json = json_encode($array); //jsonデータに変換 16 return $this->response($json, 200); 17 // 応答データを送信 18 //HTTPステータスコード200:リクエストが正常に処理できた。 19 } 20 21}

javascript

1js/main.js 2 3window.onload = (function(){ 4 console.log('test'); 5 6 $('#send').on('click', function(event){ 7 let content = $('#main').val();//chat.phpの値を代入 8 $.ajax({ 9 type: 'POST', //HTTPリクエストのタイプ 10 url: 'ajax/create.json', // リクエストしたいURLを記載。送信先 chat.php? 11 dataType: 'json', //受け取るデータの形 12 data: { 13 //渡すデータをここに記述 14 "content" : content //データ内でpostという名前で利用するため 15 }, 16 }) 17 .done(function(data) { 18 //成功した時の処理 19 console.log('送信完了'); 20 $('#return').append('<p>' + data.content + '</p>'); 21 }) 22 .fail(function(XMLHttpRequest, textStatus, errorThrown) { 23 //失敗した時の処理 24 alert('読み込み失敗'); 25 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 26 console.log("textStatus : " + textStatus); 27 alert(errorThrown); 28 }); 29 }) 30 31}); 32

PHP

1config/routes.php 2 3<?php 4return array( 5 '_root_' => 'welcome/index', // The default route 6 '_404_' => 'welcome/404', // The main 404 route 7 8 'login' => 'login/login', 9 "signin" => "login/signin", 10 "logout" => "login/logout", 11 'registration' => 'login/registration', 12 "chat" => "chat/chat", 13 // "chat" => "ajax/chat", 14 "ajax/post-rgist" => "ajax/post/regist", 15 16 'hello(/:name)?' => array('welcome/hello', 'name' => 'hello'), 17);

PHP

1views/template.php 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <meta charset="utf-8"> 7 <title><?php echo '実習課題'; ?></title> 8 <?php echo Asset::css('style.css'); ?> 9 <?php echo Asset::css('bootstrap.css'); ?> 10 <?php echo Asset::css('bootstrap.min.css'); ?> 11 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 12 <?php echo Asset::js(array('bootstrap.min.js', 'main.js')); ?> 13 </head> 14 <body> 15 <div id='header'> 16 <?php //echo $header; ?> 17 </div> 18 <div id='wrapper'> 19 <div id="content"> 20 テンプレートです<br> 21 <?php echo $content; ?> 22 </div> 23 </div> 24 <div id='footer'> 25 <?php //echo $footer; ?> 26 </div> 27 </body> 28</html>

試したこと

まず投稿機能は作成して、操作確認も問題ありませんでした。
しかし、非同期通信を行うためにどこを修正したらいいのかわからず、いくつかのサイトを参考に幾つかのフォームを作成しましたが、どれもうまく動きません。
見づらくて申し訳ありません。

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

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

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

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

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

m.ts10806

2021/12/14 06:49

>url: location.origin + "/ajax/regist.json", jsonに対してリクエストを投げているのはどういう意図ですか?
morfonica

2021/12/14 06:55

最初何かに必要なコードだと記入しました。 しかし、明らかに不要なコードでした。 修正いたしました。
morfonica

2021/12/14 07:06

$.ajaxのurlの欄には、リクエストしたいURLを記述するとのことですが、 controller_restを拡張したコントローラーのjson, XML などの形式でデータを返す処理をするアクションのことでしょうか。
m.ts10806

2021/12/14 08:05

いえ。 フレームワークのルーティングに設定した受け取りたいURLです。
guest

回答1

0

非同期処理でいまさらajax/jQueryをつかう必要はないでしょう
FuelPHPでAPIを用意し、要求(入力)に対してJSONか何かを返す仕組みにすればよいでしょう
HTML側からJSでfetchを利用すると楽です

投稿2021/12/14 07:24

yambejp

総合スコア116724

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問