Question

我是所有这些AJAX的新手，所以我认为好的学习将是构建简单的TODO列表。下面是index.php和相应的控制器。索引加载时没有错误，但是当我提交任务时，没有任何事情发生。只有页面重新加载。数据库仍然是空的。

的index.php

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h1>Todo</h1>
<form id="add" >
    <input type="input" name="task" />
    <input type="submit" value="Add" /><br />
</form>
<script>

$("form").submit(function() {
    var value = $("input:first").val();

    $.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>todo/add/" + $("input:first").val(),
        dataType: 'text',
        success: function()
        {
            var newP = $('<p />').text(value);
            $(".todos").append(newP).fadeIn(1000);
        }
    });
    return true;
});

</script>
<div class="todos"></div>
<p>Załadowano w <strong>{elapsed_time}</strong></p>
</body>

控制器/ todo.php

<?php
class Todo extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('todo_model');
    }

    public function index($type = NULL)
    {
        $this->load->view('todo/index');
    }

    public function add($data)
    {
        $this->Todo_model->add($this->input->xss_clean($data));
    }
}
?>

更新： todo_model.php：

  <?php
  class Todo_model extends CI_Model {

      public function __construct()
      {
          parent::__construct();
          $this->load->database();
      }

      public function add($data)
      {
          $this->db->insert('todo', $data);
      }

      public function get()
      {
          return $this->db->get('todo')->result();
      }
  }
  ?>

Answer 1

尝试使用：

public function add($data)
    {
        $this->Todo_model->add($data);
    }

而不是：

public function add($data)
    {
        $this->Todo_model->add($this->input->xss_clean($data));
    }

<强>更新
的 JAVASCRIPT：

$.ajax({ method: 'POST', url: '<?php echo base_url(); ?>todo/add/', data: 'data=' + $("input:first").val(), success: function(resp) { //rest processing } });

<强>控制器：

public function add() { $this->Todo_model->add($this->input->post('data')); }

Answer 2

您需要使用类似Firebug控制台的调试程序来查看服务器对您的请求的回复。
在您的脚本部分

$(function(){}

缺少

，它应该包含在你的jQuery

中

使用类似这样的内容来阻止表单提交：

if (evt.preventDefault()) {
evt.preventDefault();
}else{
evt.returnValue = false;
}

Answer 3

尝试这个，然后通过单击firebug图标然后单击控制台以查看您提交的内容以及响应的方式来调试firebug

var id = 1;

$。AJAX（{

    type: "POST",
    url: "<?php echo base_url(); ?>todo/add/",
    data: {id : id},
    success: function()
    {
        var newP = $('<p />').text(value);
        $(".todos").append(newP).fadeIn(1000);
    }
});

jQuery，AJAX和Codeigniter - 表单提交不起作用

3 个答案: