[英]Submitting a form through AJAX using CodeIgniter
I am building a web application that will let users follow discussion threads, in Q&A format. 我正在构建一个Web应用程序,它将使用户可以Q&A格式关注讨论线程。 To that end, when displaying questions, I have a "Follow" button next to each question.
为此,在显示问题时,每个问题旁边都有一个“关注”按钮。 I want users to be able to follow these threads without reloading the page, thus using AJAX.
我希望用户能够在不重新加载页面的情况下遵循这些线程,从而使用AJAX。 So, I want the AJAX call to:
因此,我希望AJAX调用:
1) Submit a form updating the database recording following relationships; 1)提交更新记录以下关系的数据库的表格; and 2) Replace "Follow" submit button with a "Following"
和2)将“关注”提交按钮替换为“关注”
Here's my JavaScript code: 这是我的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;
});
});
Here is what my form code looks like. 这是我的表单代码的样子。 I stripped out the action and method to keep the form from submitting itself regularly.
我删除了操作和方法,以防止表单定期提交。 I tried to preventDefault using JS, but that didn't work.
我试图使用JS阻止Default,但是那没用。 (The values are filled in by the model):
(值由模型填充):
<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>
Right now the controller is pretty straightforward -- it just takes the array of post variables and submits them straight to the database. 现在,控制器非常简单-只需获取post变量数组并将其直接提交到数据库即可。
I'm not too great at JavaScript, so my apologies if I'm taking up your time with a straightforward problem. 我不太擅长JavaScript,因此,如果我花了很多时间解决一个简单的问题,我深表歉意。
I'll just be general here, but hopefully it will help. 我这里只是一般性的,但希望会有所帮助。 If it were me, I would do something like the following:
如果是我,我将执行以下操作:
Here's some html, generated from codeigniter: 这是从codeigniter生成的一些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>
Then make everything work without javascript (you add that later). 然后,使所有内容都无需使用javascript(稍后再添加)。 So here's the codeigniter controller with some general code:
所以这是带有一些通用代码的codeigniter控制器:
<?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 */
Now, whether they're using javascript or not, it will work. 现在,无论他们是否使用javascript,它都可以使用。 Here's where you add the javascript (I'm assuming you're using jquery?).
在这里添加javascript(我假设您正在使用jquery?)。 If not, it will be close enough.
如果没有,它将足够接近。
$(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'
);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.