使用CodeIgniter通過AJAX提交表單

Question

我正在構建一個Web應用程序，它將讓用戶按照Q &格式進行討論。爲此，當顯示問題時，每個問題旁邊都有一個「關注」按鈕。我希望用戶能夠在不重新加載頁面的情況下遵循這些線程，從而使用AJAX。所以，我想要AJAX電話：

1）提交表單更新數據庫記錄下列關係;和 2）將「遵循」與提交按鈕「下面的」

這裏是我的JavaScript代碼：

$("#submitFollow").click(function() { 
    var type = $("input#type").val(); 
    var u_id = $("input#u_id").val(); 
    var e_id = $("input#e_id").val(); 
    var dataString = 'type='+ type + '&u_id=' + u_id + '&e_id=' + e_id; 

    $.ajax({ 
     type: "POST", 
     url: "<?=site_url()?>/follow/ajaxFollow", 
     data: dataString, 
     success: function() { 
      $('#following').html("Following"); 
      .hide() 
      .fadeIn(1500) 
     } 
    }); 
    return false; 
}); 
}); 

這裏是我的表單代碼如下所示。我剔除了防止表單經常提交的行爲和方法。我試圖阻止默認使用JS，但是這沒有奏效。 （該值由模型填寫）：

<div id="following"> 
<form id="followForm" action="" method=""> 
<input type="hidden" name="type" id="type" value="question"> 
<input type="hidden" name="u_id" id="u_id" value="1"> 
<input type="hidden" value="12" name="e_id" id="e_id"> 
<input type="submit" id="submitFollow" value="Follow Question" class="submitFollow"> 
</form> 
</div> 

眼下控制器是非常簡單 - 它只是需要交變量的陣列和直將其提交到數據庫中。

我對JavaScript並不太瞭解，所以如果我花了一個簡單的問題，我很抱歉。

Answer 1

我只是在這裏一般，但希望它會有所幫助。如果是我，我會做類似如下：

這裏的一些HTML，從笨產生：

<div> 
questions 1 
</div> 
<div> 
<a class="follow" href="http://example.com/follow/question/1">Follow Question 1</a> 
</div> 

<div> 
questions 2 
</div> 
<div> 
<a class="follow" href="http://example.com/follow/question/2">Follow Question 2</a> 
</div> 

然後，讓沒有JavaScript的一切工作（您添加更高版本）。所以這裏是代碼控制器的一些通用代碼：

<?php 

class Follow extends Controller { 

    function Follow() 
    { 
     parent::Controller(); 
     $this->auth->restrict_to_admin(); 
    } 

    function question($id = NULL) 
    { 
     if($id) 
     { 
      //get question from database using the id 
      //i assume somehow the user is logged in? use their id where applicable 
      echo '<span>You are now following this question</span>'; 
     } 
    } 

} 

/* End of file follow.php */ 

現在，無論他們是否使用JavaScript，它都可以工作。這裏是你添加javascript的地方（我假設你正在使用jquery？）。如果不是，它將足夠接近。

$(document).ready(function(){ 
    $('follow').click(function(event){ 
     event.preventDefault(); 

     var followUrl = $(this).attr('href'); 
     //do ajax call here. 
     $.post(
     followUrl, 
     { 
      //any paramaters you need to add can 
      //go here in this format: 
      //param_key: param_value 
     }, 
     function(responseText){ 
      //here you can update the clicked link to say something 
      //like "you are now following this question" 
      //the responseText var will have whatever text the server responds with. 
      //just responsd with html 
     }, 
     'html' 
     ); 

    }); 
});