前回の投稿の続きになります。
setTimeoutとボタン押下の処理がうまくいかない
現在cakePHP3,PHP,HTML(ctp),JavaScript(jQuery)を使ってアプリ開発をしています。
前回のコードにajaxを組み込んだのですが、
サーバーエラーが出てしまいます。なぜでしょうか?
ajaxを使ってPHPに一度行って(まだ特に処理は書いていない)またjsに返ってくるようにしたいのですが、500のInternal Server Errorが出てしまいます。
コードは以下です。
settimeout.ctp
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 5<style> 6.box1{ 7 width: 150px; 8 height: 150px; 9 background-color: aqua; 10 margin-top: 20px; 11} 12.box2{ 13 width: 150px; 14 height: 150px; 15 background-color: red; 16 margin-top: 20px; 17 display: none; 18} 19</style> 20</head> 21<body> 22<br> 23<input type="text" id="text" oninput="red(this)"> 24<input type="button" id="aqua" value="青を表示"> 25<div class="box1"></div> 26<div class="box2"></div> 27</body> 28<script> 29// ボタン押下時、「青」に変える 30var timer = false; 31$("#aqua").click(function(){ 32 if (timer !== false) { 33 clearTimeout(timer); 34 } 35 $('div.box1').show(); 36 $('div.box2').hide(); 37 $('#text').val(''); 38 39}); 40 41// 「赤」に変える。oninput処理を何度も走らせないため1秒後に実行 42function red(_this){ 43 if (timer !== false) { 44 clearTimeout(timer); 45 } 46 timer = setTimeout(function(){ 47 48 $.ajax({ 49 url: "http://localhost/cakephp3/sample/blue", 50 }).done(function(){ 51 52 $('div.box1').hide(); 53 $('div.box2').show(); 54 console.log(_this.value); 55 56 }).fail(function(){ 57 console.log('error!!!'); 58 }); 59 },1000); 60} 61</script> 62</html> 63
SampleController
Php
1<?php 2namespace App\Controller; 3 4use App\Controller\AppController; 5 6class SampleController extends AppController 7{ 8 9 //初期表示で呼ばれるアクション 10 public function setTimeout() 11 { 12 13 } 14 15 //Ajaxで呼ばれるアクション 16 public function blue() 17 { 18 $this->autoRendor =false; 19 20 } 21} 22
もしわかる方がいればお願い致します。
回答2件
あなたの回答
tips
プレビュー