使用jQuery和CodeIgniter提交表單而不刷新頁面

我想在CodeIgniter應用程序中使用jQuery提交表單。但是，Controller中調用的函數一直希望將用戶發送到不存在的頁面（與Controller函數名稱相同）。使用jQuery和CodeIgniter提交表單而不刷新頁面

我已經試過這樣：

$('#contactForm').submit(function() { 

});

這：

$('#contactForm').submit(function() { 
    dataString = $("#contactForm").serialize(); 
    $.ajax({ 
     type:"POST", 
     url:"<?php echo base_url(); ?>about/contactSubmit", 
     data:dataString, 

     success:function (data) { 
      alert('test'); 
     } 

    }); 

    return false; //stop the actual form post !important! 
});

形式是一個簡單的表格ID爲「聯繫形式」。 jQuery提交功能的作用在於它發送到Controller中的「contactSubmit」函數。這個功能看起來是這樣的：

public function contactSubmit() 
{ 

    $this->load->model('customer_model'); 
    $this->customer_model->addCustomer(); 
}

所以，在添加在數據庫中的信息模型調用一個addCustomer功能。所有的工作正常。但隨後它會嘗試打開一個不存在的「customerSubmit」頁面，這就是我想要避免的。我只是希望它保持在同一頁面上，它有一個jQuery函數用於告訴用戶表單已被提交。

那麼我該如何做到這一點？

編輯：

它似乎不被髮送到由控制器功能contactSubmit一個新的頁面，關鍵是要在提交jQuery函數返回false，從關於這個問題，我可以找到每一個教程來判斷，但。 ..當我確實包含它時，Controller函數根本不會被調用。這意味着只有上面的第一個選項確實調用了Controller函數（即.submit沒有返回false）。

那麼我在這裏做錯了什麼？如果我應該使用提交將數據傳遞給數據庫，但是「返回false」會阻止它實際調用Controller中的函數？

編輯2：找到了答案，請參閱我對Christophs發表的評論！

來源

2012-02-08 Anders

誰試圖打開customerSubmit頁？ – demalexx 2012-02-08 16:48:33

好吧，沒有人試圖，但事實是我需要調用一個函數來將數據添加到數據庫中，當我這樣做時，該函數將用戶傳遞到應該與Controller函數名稱相對應的頁面。這就是我不想... – Anders 2012-02-08 20:03:58

@AndersSvensson我不熟悉PHP，但你看過這個答案[這裏]（http://stackoverflow.com/questions/5098945/submit-external-form-不，離開頁式現場）？ – sinemetu1 2012-02-11 16:28:48

只是一個猜測：嘗試event.preventDefault()停止在<form action="...">（通常是發送表單數據並轉發到某種「請求接收」頁面）中定義的提交操作的默認行爲。

的代碼將是這樣的：

$('#contactForm').submit(function (event) { 
    dataString = $("#contactForm").serialize(); 
    $.ajax({ 
     type:"POST", 
     url:"<?php echo base_url(); ?>about/contactSubmit", 
     data:dataString, 

     success:function (data) { 
      alert('test'); 
     } 

    }); 
    event.preventDefault(); 
});

來源

2012-02-11 12:29:15 Christoph

不幸的是，與返回false具有相同的效果 - 即，根本不調用Controller中的函數，這是不好的，因爲我需要去那個函數來進行實際的數據庫更新。我只是不想離開頁面......我相信你是對的，這是阿賈克斯應該如何工作。您可以使用event.preventDefault來停止正常提交併發佈數據。但然後功能不被調用，這就是我不明白... – Anders 2012-02-11 12:45:10

你確定，控制器沒有被調用？你的ajax數據的返回值是什麼？你可以發佈數據嗎？添加一個錯誤函數和console.log（數據），看看會發生什麼。 – Christoph 2012-02-11 13:27:47

好的，謝謝，最後的提示讓我找到了答案。當檢查這個我得到的信息，讓我意識到它沒有被調用，因爲該網址是錯誤的。我在外部的js文件中有<？php echo base_url（）;？>，這是行不通的。所以我在php文件中創建了一個js變量，以便能夠使用base_url的php函數，然後在ajax函數中使用這個js變量。然後它工作！謝謝，我會獎勵你，讓我找到答案。 – Anders 2012-02-13 15:56:39

也許你分配時，頁面沒有加載尚未submit處理程序，所以JS不會看到任何形式的物體，儘量把它分配在頁面加載事件處理程序是這樣的：

$(function() { 
    $('#contactForm').submit(function() { 
     .... 
    }); 
});

來源

2012-02-09 03:05:26 demalexx

不，這不是問題，我只是把這部分留出來展示重要的部分。正如我所提到的，jQuery函數的工作原理是，submit在表單的action屬性中調用contactSubmit函數。問題是CodeIgniter然後想要爲這個Controller函數提供一個同名的頁面，而且我不想更改頁面，我只是想調用一個函數來將數據傳遞給數據庫... – Anders 2012-02-09 06:45:04

使用jQuery和CodeIgniter提交表單而不刷新頁面

回答

相關問題