如何從javascript調用控制器功能

Question

使用mvc和codeigniter創建Web應用程序。在視圖中，點擊一個按鈕時，它會調用一個javascript方法。該方法應該將3張圖像的來源作爲參數，並將它們傳遞給控制器​​方法。然後，控制器方法將它們轉換爲單個$記錄並將其傳遞給模型中的函數，然後將該記錄內容插入到數據庫中。

視圖按鈕：

<input type="submit" class="btn btn-primary" value="Assemble bot" onclick="insertAssembled()"></input> 

JavaScript函數：

function assemble(var head, var body, var legs) { 
    var head = document.getElementById("HeadImage".src); 
    var body = document.getElementById("BodyImage".src); 
    var legs = document.getElementById("FeetImage".src); 
    // call controller function here, passing head body and legs 
} 

控制器的方法：

public function insertAssembled($head, $body, $legs) { 
     //Build record and send to saveBot  
     $record['id'] = 1; 
     $record['head'] = $head; 
     $record['body'] = $body; 
     $record['legs'] = $legs; 
     $this->Robotsdata->saveBot($record); 
    } 

模型法（很粗糙，有利於不需要只是想傳遞參數）：

public function saveBot($record) { 
    $con = mysql_connect("localhost","root@localhost",""); 
    mysql_select_db("factory", $con); 
    $bot_id = $_POST['id']; 
    $bot_head = $_POST['head']; 
    $bot_body = $_POST['body']; 
    $bot_legs = $_POST['legs']; 
    $query = "INSERT INTO `factory`.`assembledbots` ('id', 'head', 'body', 'legs') " 
      . "VALUES ('$bot_id', '$bot_head', '$bot_body', '$bot_legs');"; 
    mysql_query($query); 
    mysql_close($con); 
} 

Answer 1

你可以嘗試通過使用AJAX你DATAS如果所包含的jQuery庫：

$.ajax({ 
    url: 'Path/To/YourController.php', 
    type: 'POST', 
    dataType: 'text', 
    data: { 
     head: head, //You'll get it with $_POST['head'] 
     body: body, //You'll get it with $_POST['body'] 
     legs: legs //You'll get it with $_POST['legs'] 
    }, 
}) 
.done(function(data) { 
    // Do what you want in case of success 
}) 
.fail(function(err) { 
    //Do what you want incase of error 
}); 

Answer 2

您可以通過使用AJAX實現這一目標。另外，在您的模型中，嘗試使用CI的查詢生成器類（Active Record），以便您的查詢安全並避免SQL注入。

的JavaScript

function assemble(var head, var body, var legs) { 
    var head = document.getElementById("HeadImage".src); 
    var body = document.getElementById("BodyImage".src); 
    var legs = document.getElementById("FeetImage".src); 

    //ajax 
    //you post variables 
    var fields = { 
     head : head, 
     body : body, 
     legs : legs, 
     submit_a: true 
    }; 

    $.ajax({ 
    url: 'domain/controller/insertAssembled', 
    type: 'POST', 
    data: fields, 
    dataType:'JSON', 
    success: function(result){ 
     console.log(result); 
    } 
    }); 
} 

控制器

public function insertAssembled() 
{ 

    if ($this->input->is_ajax_request()) { // just additional, to make sure request is from ajax 
    if ($this->input->post('submit_a')) { 
     $record['id'] = 1; 
     $record['head'] = $this->input->post('head'); 
     $record['body'] = $this->input->post('body'); 
     $record['legs'] = $this->input->post('legs'); 

     // to model 
     $this->Robotsdata->saveBot($record); 

     // return to view 
     echo json_encode(array("error"=>false)); 
     return false; 
    } 
    } 
} 

模式

public function saveBot($record) 
{ 
    if ($record) { 

    $save_fields = array(
     'id' => $record['id'], 
     'head' => $record['head'], 
     'body' => $record['body'], 
     'legs' => $record['legs'] 
    ); 
    $this->db->insert('table_name', $save_fields); 

    return true; 
    } 
    return false; 
}