thinkphp5最最最最簡單的ajax實例
一、總結
一句話總結：頁面端使用$.get()方法傳遞ajax請求，服務器端判斷是不是ajax請求，是的話接受參數，進行邏輯處理之后向客戶端返回值。
1、頁面端如何傳遞ajax請求？
$.get()方法即可
22 <script> 23 $('#my_ajax_test').click(function(){ 24 var name=$('input').val(); 25 //alert(name); 26 $.get("{:url('test_ajax/index')}",{name:name},function(data){ 27 alert('Ajax從服務器端返回來的值是：'+data); 28 }); 29 }); 30 </script>
2、服務器端如何判斷是不是ajax請求？
request()->isAjax()，thinkphp5提供了ajax判斷函數isAjax()
8 public function index() 9 { 10 if(request()->isAjax()){ 11 $name=input('name'); 12 return $name.' fry'; 13 //dump($name);die; 14 } 15 return view(); 16 }
二、thinkphp5最最最最簡單的ajax實例
1、演示截圖
2、目錄結構
2、代碼
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TestAjax</title> 6 <script src="__HOMEPAGE__/js/jquery.min.js"></script> 7 <style> 8 div:first-child{ 9 text-align: center; 10 margin-top: 100px; 11 } 12 </style> 13 </head> 14 <body> 15 <div> 16 <input type="text" placeholder="請輸入姓名"> 17 <div> 18 <button id="my_ajax_test">確認</button> 19 </div> 20 </div> 21 </body> 22 <script> 23 $('#my_ajax_test').click(function(){ 24 var name=$('input').val(); 25 //alert(name); 26 $.get("{:url('test_ajax/index')}",{name:name},function(data){ 27 alert('Ajax從服務器端返回來的值是：'+data); 28 }); 29 }); 30 </script> 31 </html>
TestAjax.php
1 <?php 2 namespace app\index\controller; 3 4 use app\index\controller\Base; 5 6 class TestAjax extends Base 7 { 8 public function index() 9 { 10 if(request()->isAjax()){ 11 $name=input('name'); 12 return $name.' fry'; 13 //dump($name);die; 14 } 15 return view(); 16 } 17 }