喔喔~~~要來搞懂MVC架構了，先從加法這個小練習下手但對我來說還是難T T
首先呢
先建置MVC檔案
Model 模型 > add_calculator_model.php
Controller 控制器 > add_calculator.php
view 檢視 > add_calculator_view.php
add_calculator.js
1. 我先從我認識的View開始著手，建立加法的頁面
<!DOCTYPE html>
<html>
<head>
<script src="packages/jquery/2.1.1/jquery.min.js"></script>
<script src="js/add_calculator.js"></script>
<meta charset="UTF-8">
<title>加法</title>
</head>
<body>
<form>
兩數相加 <input type="text" id="addition_sum">
<br></br>
請輸入第一個數字:
<input type="text" id="addition_num1" name="addition_num1">
<br></br>
請輸入第二個數字:
<input type="text" id="addition_num2" name="addition_num2">
<br></br>
<input type="button" value="Submit" id="addition_click">
</form>
</body>
</html>
2. add_calculator.js (ajax 為js 跟controller 溝通橋梁)
$(document).ready(function() {
$('#addition_click').on('click', function () {
var addition_num1 = $('#addition_num1').val();
var addition_num2 = $('#addition_num2').val();
get_sum_to_view(addition_num1, addition_num2);
});
//點擊取得使用者輸入的值並後續動作
function get_sum_to_view(addition_num1, addition_num2) {
$.ajax({
url: 'add_calculator/get_sum',
type: 'POST',
dataType: 'json',
async: 'true',
data: {
add_num1: addition_num1,
add_num2: addition_num2
},
success: function (sum) {
$('#addition_sum').val(sum);
}//確定成功，取得值並在VIEW顯示
});
}
});
3. 再來編輯Controller 控制器
<?php if(!defined('BASEPATH')) exit('No direct script access allowed');
class Add_calculator extends MY_Controller {
public function __construct() {
parent::__construct();
}
public function index(){
$this->load->view('add_calculator_view');
}
public function get_sum() {
$num_all = $this->input->post(); //接收ajax
$this->load->model('add_calculator_model'); //叫Model做事
$add_sum = $this->add_calculator_model->add_sum($num_all);//叫Model的add_sum function做完事，取得$add_sun
echo json_encode($add_sum);//回傳給ajax $add_sum
}
}
備註：開啟application/config/routes.php檔案，$route['default_controller'] = "add_calculator"; 可以設定預設的控制器
注意：class 命名字首要大寫
4. 最後編輯Model
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Add_calculator_model extends MY_Model {
public function __construct() {
parent::__construct();
}
public function add_sum($num_all) {
$add_sum = $num_all['add_num1'] + $num_all['add_num2'];
return $add_sum;
}
}
留言列表
作品集 (4)