如何从javascript调用控制器功能

时间:2017-03-28 21:14:01

标签: javascript php codeigniter web-applications

使用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);
}

2 个答案:

答案 0 :(得分:1)

如果你已经包含了jQuery库,你可以尝试使用ajax传递你的数据:

$.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
});

答案 1 :(得分:1)

您可以使用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;
}