CodeIgniter的Ajax表單 - 提交表格

我是新來的stackoverflow和CodeIgniter，我目前正在試驗一些簡單的代碼示例，我已經在互聯網上找到了一個開始。我現在正在使用的是一種表單，它使用CI和Ajax（jQuery），並將表單的輸入保存到數據庫中，然後將最近的表單顯示在表單的同一頁面上。如果我讓你感到困惑，那麼這是來自here的4.7應用示例。最初的源代碼位於here，但我已經修改它以便與CI的最新版本一起工作，並引用了我下面的所有MVC文件。CodeIgniter的Ajax表單 - 提交表格

控制器：

<?php 
class Message extends CI_Controller 
{ 
    function __construct() 
    { 
     parent::__construct(); 
     $this->load->helper('form'); 
     $this->load->helper('url'); 
     $this->load->helper('security'); 
     $this->load->model('Message_model'); 
    } 

    function view() 
    { 
     //get data from database 
     $data['messages'] = $this->Message_model->get(); 

     if ($this->input->is_ajax_request()) // load inline view for call from ajax 
      $this->load->view('messages_list', $data); 
     else // load the default view 
      $this->load->view('default', $data); 
    } 

    //when we pres the submit button from the form 
    function add() 
    { 
     if ($_POST && $_POST['message'] != NULL) 
     { 
      $message['message'] = $this->security->xss_clean($_POST['message']); 
      $this->Message_model->add($message); 
     } 
     else 
     { 
      redirect('message/view'); 
     } 
    } 
} 
?>

型號：

<?php 
class Message_model extends CI_Model 
{ 
    function __construct() 
    { 
     parent::__construct(); 
     $this->load->database(); 
    } 

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

    function get($limit=5, $offset=0) 
    { 
     $this->db->order_by('id', 'DESC'); 
     $this->db->limit($limit, $offset); 

     return $this->db->get('messages')->result(); 
    } 
} 
?>

瀏覽

如default.php：

<!-- called using message/view --> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <script src="<?php echo base_url('js/jquery-1.8.1.min.js'); ?>" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       $('#submit').click(function(e) 
       { 
        e.preventDefault(); 
        var msg = $('#message').val(); 
        $.post("", {message: msg}, function() { 
         $('#content').load(""); 
         $('#message').val(''); 
        }); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <?php echo form_open("message/add"); ?> 
     <input type="text" name="message" id="message"> 
     <input type="submit" value="submit" name="submit" id="submit"> 
     <?php echo form_close(); ?> 

     <div id="content"></div> 
    </body> 
</html>

messages_list.php：

<!-- called from ajax call --> 

<ol> 
<?php foreach ($messages as $cur): ?> 
    <li><?php echo $cur->message; ?></li> 
<?php endforeach; ?> 
</ol>

的問題主要在於的意見（如default.php）1號。也就是說，如果我從javascript代碼中省略e.preventDefault();行，表單會加載一個空白頁面的不同頁面（消息/添加，如表單動作參數所暗示的），同樣也會取消我的應用程序的ajax行爲。另一方面，如果我實際上添加了這一行，那麼我的消息控制器的add方法不會被調用，因此不會將我輸入的內容添加到數據庫中。

最後，我想下面的js代碼，而不是上下排列：

$(document).ready(function() 
      { 
       $('#submit').click(function(e) 
       { 
        e.preventDefault(); 
        var msg = $('#message').val(); 
        $.post("<?php echo base_url(); ?>message/add", {message: msg}, function() { 
         $('#content').load(""); 
         $('#message').val(''); 
        }); 
       }); 
      });

但似乎爲$。員額（），因爲沒有什麼是它應該運行的功能執行崩潰呀在成功的post（）調用中。

任何幫助讚賞和抱歉的大帖子。 :)

來源

2012-09-10 Lucky Luke

在如default.php，爲什麼'$ .post'網址PARAM空？ – froddd

您是對的，您必須致電e.PreventDefault();，但您還必須處理來自回調函數的迴應，而您並非如此。回調需要幾個參數，但第一個是你感興趣的，這是你的服務器的響應。我已經表示它下面r：

$(document).ready(function(){ 
    $('#submit').click(function(e){ 
     e.preventDefault(); 
     var msg = $('#message').val(); 
     $.post("<?php echo base_url(); ?>message/add", {message: msg}, function(r) { 
      //do something with r... log it for example. 
      console.log(r); 
     }); 
    }); 
});

我也刪除$.("#content").load(...);。當第一個完成時，這實際上會執行另一個 AJAX請求。

現在，檢查你的控制器...請不要使用$ _POST。 CodeIgniter爲您提供$this->input->post()作爲Input Library的一部分。如果您在config/config.php中啓用Global XSS過濾，則無需xss清除它。您可以通過使用$this->input->post('name', true);

上後按崗位基礎清潔，我建議這個：

function add(){ 
    $m = $this->input->post('message', true); 
    if($m){ 
     $this->Message_model->add($m); 
    } 
}

來源

2012-09-10 16:37:12

console.log（），我不知道，給了我路徑。發佈的URL以及加載（）上的URL都不正確。 '<？php echo site_url（）; ？>/message/...'工作。也許罪魁禍首是我沒有禁用index.php CI「功能」，我不確定。現在，該應用按預期工作。非常感謝！ –

的問題不在於與CI，其JS這是錯誤的，

$(document).ready(function() 
     { 
      $('#submit').click(function(e) 
      { 
       e.preventDefault(); 
       var msg = $('#message').val(); 
       $.post("<?php echo base_url(); ?>message/add", {message: msg}, function() { 
        $('#content').load("<?php echo base_url(); ?>/message/view"); 
        $('#message').val(''); 
       }); 
      }); 
     });

的e.preventDefault（）用於阻止提交按鈕的默認行爲（將帶你去消息/添加），我們不想要。您稍後將URl參數添加到$ .post（）函數中是正確的，但在回調函數中，.load會將傳遞給它的URL加載到#content中，因此無需傳遞任何url，當然就贏了沒有什麼要加載的。

來源

2012-09-10 13:27:46 hndr

CodeIgniter的Ajax表單 - 提交表格

回答

相關問題