2012-03-13 4 views
0

Я новичок во всей этой вещи AJAX, поэтому я думал, что хорошим обучением будет создание простого списка TODO. Ниже приведен индекс index.php и соответствующий контроллер. Индекс загружается без ошибок, но когда я отправляю свою задачу, ничего не происходит. Загружается только страница. База данных по-прежнему пуста.jQuery, AJAX и Codeigniter - форма submit не работает

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(); 
     } 
    } 
    ?> 
+0

ли вставная работа, если вы просто посетите страницу с помощью браузера (или скручивания)? –

+0

Да, добавить функция работает. – GeekDaddy

ответ

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')); 
    } 
+0

До сих пор не работает – GeekDaddy

+0

увидеть обновления –

+0

Made ваши изменения. Небольшая отладка с помощью print_r и die(). Добавить функцию не загружается. – GeekDaddy

0
  • Вам нужно использовать отладчик, например консоль Firebug, чтобы узнать, что ответ сервера соответствует вашему запросу.

  • В вашем разделе сценария

$(function(){}

отсутствующий, который должен быть обернутым вокруг JQuery

  • использование что-то вроде этого, чтобы остановить форму от представления:
if (evt.preventDefault()) { 
evt.preventDefault(); 
}else{ 
evt.returnValue = false; 
} 
+0

Как проверить повтор в firebug? – GeekDaddy

+0

http://www.youtube.com/watch?v=W4jXAaEMp2M – qwertzman

0

Попробуйте это, затем отлажив его с помощью 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); 
    } 
}); 
Смежные вопросы