実現したいこと
vue.jsからslimへajaxを使ってDBデータの取得及び、formデータのポストをしたい。
以下のソースでも投稿するボタンをクリックする事で、固定文字列でinsertできるが、
ここから発展して以下の2つを実現したい。
①formに入力された値をslimへ渡し、入力値を使って動的にinsert。
②ajax経由でコントローラを起動、コントローラで取得したDBデータをjsファイルで受け取る。
jQueryでのajaxはした事があるのですが、Vue.jsとslimの組み合わせ時にどうすればよいのかわからなくなってしまいました。
ライブラリ使用等の縛りはありませんが、できるだけVue.js単体かjQeuryで完結したいです。
vue
1//test.js 2export default { 3 template: ` 4 <div> 5 <form> 6 <input type="text" name="title"><br> 7 <textarea name="body" rows="10" cols="50"></textarea> 8 <input type="button" name="post_submit" value="投稿する" @click="post"> 9 </form> 10 </div> 11 ` 12 , 13 methods:{ 14 post: function() { 15 fetch('./ajax') 16 } 17 } 18}
php
1<?php 2//routes.php 3use Slim\Http\Request; 4use Slim\Http\Response; 5use Classes\Controllers\TestController; 6 7// Routes 8$app->get('/ajax', TestController::class . ':ajax');
php
1<?php 2//TestController.php 3namespace Classes\Controllers; 4 5use Slim\Http\Request; 6use Slim\Http\Response; 7 8class TestController extends Controller 9{ 10 public function ajax(Request $request, Response $response) 11 { 12 $sql = 'insert test_table values("hoge", "hogehoge", "hogeです。", "fuga")'; 13 $this->db->query($sql); 14 } 15} 16
あなたの回答
tips
プレビュー