Laravel에서 ajax에 도전해 보았습니다.
Ajax 코드
다른 사이트를 그대로 전용했다.
너무 길었기 때문에 먹지 않고 싫어하는 알레르기를 일으켜서 몹시 일할 생각이 일어나지 않았습니다.
JavaEE의 facelet 템플릿 엔진이라고 하면, 간단하게 실장할 수 있는 태그 같은 것이 있었으므로, 최신의 PHP 프레임워크(2019년 현재)인 Laravel이라면 당연히 그러한 간단한 것이 있을 것이라고 생각해 잠시 구그하고 있었습니다 하지만, 어느 것을 봐도 이런 느낌이었습니다.
JQuery입니다만, 길기 때문에 통째로 카피해 코멘트의 행만 바꿔서 사용합시다.
<script>
$(function(){
$('#button').click( //起動するボタンなどのid名を指定
function(){
$.ajax({
type:'GET', //GETかPOSTか
url:'ajaxtest',//url+ファイル名 .htmlは省略可
dataType:'html',//他にjsonとか選べるとのこと
}).done(function (results){
$('#text').html(results);//展開したいタグのidを指定
}).fail(function(jqXHR,textStatus,errorThrown){
alert('ファイルの取得に失敗しました。');
console.log("ajax通信に失敗しました")
console.log(jqXHR.status);
console.log(textStatus);
console.log(errorThrown.message);
});
}
);
});
</script>
<input type="button" id="button" value="AjaxTest"><br/>
<div id="text"></div>
패스에 빠지다
여기부터가 본제입니다만, blade의 경우 어디에 두는지로 꽤 헤매습니다.
상기의 코드가 있는 폴더에 함께 넣어 두면 곧 할 수 있을 것 같습니다만, 단지 둘만으로는 404가 나옵니다.
게다가 브라우저의 개발 화면에서 밖에 404를 확인할 수 없기 때문에 수수께끼의 에러에 빠졌습니다.
결론에서 말하면 다른 blade.php 파일과 마찬가지로 web.php와 Controller에 추가하면 경로가 통과합니다.
Controller에서 return view로 지정하는 것이 포인트.
왜 그런지 말하면 호출자의 php 파일이 라우팅에 의해 파일의 위치와 다른 곳을 주소로 지정되어 있기 때문에 위의 코드 URL의 상대 경로는 그 날아간 URL에서 상대 경로가 되기 때문입니다.
예를 들어, 다음 라우팅을 수행하는 파일에 위의 코드가 있다고 가정합니다.
web.phpRoute::get('/' ,'SampleController@index_get');
그렇다면 URL은 htp://127.0.0.1:8000/
그럼 이것은 개발 폴더라고 하면 어디서 말하면 public 폴더의 바로 아래가 된다.
그래서 web.php에 기술하지 않아도 거기에 두면 패스가 지나갑니다.
다만, 그것이라고 ajax로 부르는 파일만 다른 소스 파일과 전혀 다른 곳에 두게 되기 때문에 곤란한 것입니다.
그러니까
web.phpRoute::get('/ajaxtest' ,'SampleController@ajaxtest_get');
라는 느낌으로 추가하여 SampleController에 function ajaxtest_get()
라는 느낌으로 갈 수 있습니다.
GoogleCrome의 경우 패스만 다니면 이런 느낌으로 자세한 오류가 보이게 되므로 개발 메뉴에서 조사하면 됩니다.
Ajax의 디버깅 방법에 대해
여기의 기사가 뛰어났기 때문에 링크 실어 둡니다.
Reference
이 문제에 관하여(Laravel에서 ajax에 도전해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k-tabuchi/items/735e6be68d4ef5f34d32
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
$(function(){
$('#button').click( //起動するボタンなどのid名を指定
function(){
$.ajax({
type:'GET', //GETかPOSTか
url:'ajaxtest',//url+ファイル名 .htmlは省略可
dataType:'html',//他にjsonとか選べるとのこと
}).done(function (results){
$('#text').html(results);//展開したいタグのidを指定
}).fail(function(jqXHR,textStatus,errorThrown){
alert('ファイルの取得に失敗しました。');
console.log("ajax通信に失敗しました")
console.log(jqXHR.status);
console.log(textStatus);
console.log(errorThrown.message);
});
}
);
});
</script>
<input type="button" id="button" value="AjaxTest"><br/>
<div id="text"></div>
여기부터가 본제입니다만, blade의 경우 어디에 두는지로 꽤 헤매습니다.
상기의 코드가 있는 폴더에 함께 넣어 두면 곧 할 수 있을 것 같습니다만, 단지 둘만으로는 404가 나옵니다.
게다가 브라우저의 개발 화면에서 밖에 404를 확인할 수 없기 때문에 수수께끼의 에러에 빠졌습니다.
결론에서 말하면 다른 blade.php 파일과 마찬가지로 web.php와 Controller에 추가하면 경로가 통과합니다.
Controller에서 return view로 지정하는 것이 포인트.
왜 그런지 말하면 호출자의 php 파일이 라우팅에 의해 파일의 위치와 다른 곳을 주소로 지정되어 있기 때문에 위의 코드 URL의 상대 경로는 그 날아간 URL에서 상대 경로가 되기 때문입니다.
예를 들어, 다음 라우팅을 수행하는 파일에 위의 코드가 있다고 가정합니다.
web.php
Route::get('/' ,'SampleController@index_get');
그렇다면 URL은 htp://127.0.0.1:8000/
그럼 이것은 개발 폴더라고 하면 어디서 말하면 public 폴더의 바로 아래가 된다.
그래서 web.php에 기술하지 않아도 거기에 두면 패스가 지나갑니다.
다만, 그것이라고 ajax로 부르는 파일만 다른 소스 파일과 전혀 다른 곳에 두게 되기 때문에 곤란한 것입니다.
그러니까
web.php
Route::get('/ajaxtest' ,'SampleController@ajaxtest_get');
라는 느낌으로 추가하여 SampleController에 function ajaxtest_get()
라는 느낌으로 갈 수 있습니다.
GoogleCrome의 경우 패스만 다니면 이런 느낌으로 자세한 오류가 보이게 되므로 개발 메뉴에서 조사하면 됩니다.
Ajax의 디버깅 방법에 대해
여기의 기사가 뛰어났기 때문에 링크 실어 둡니다.
Reference
이 문제에 관하여(Laravel에서 ajax에 도전해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k-tabuchi/items/735e6be68d4ef5f34d32
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Laravel에서 ajax에 도전해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k-tabuchi/items/735e6be68d4ef5f34d32텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)