我试图在没有codeigniter的情况下使用jquery ajax提交一个表单,只是为了了解ajax是如何工作的。它工作得很好,但现在我想在codeigniter中完成它(因为我正在CI中开发我的应用程序(。它不是在数据库中插入值。我不知道如何检查的问题
这是我的表格:-
<form name="article_form" method="POST" action="">
<input type="text" name="title" placeholder="Title for your article" />
<br>
<textarea rows="12" name="body" placeholder="Tell your story"></textarea>
<br>
<input type="submit" name="submit_article" id="submit_article" value="Post" />
</form>
这是我的jquery ajax脚本:-
<script language='JavaScript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script>
$('#submit_article').click(function(){
var article_title = document.getElementById("title").value;
var article_body = document.getElementById("body").value;
$.ajax({
url: '<?php echo base_url()."main/submit_article";?>',
type: 'POST',
dataType: 'json',
data: 'title='+article_title + '&body='+article_body,
success: function(output_string){
$('#result_table').append(output_string);
}
});
});
</script>
主要是控制器和此功能子部分_文章:-
public function submit_article()
{
$article_title = $this->input->post('title');
$article_body = $this->input->post('body');
$this->load->model("model_articles");
if($this->model_articles->article_submit($article_title, $article_body))
{
return true;
}
else
{
return false;
}
}
这将加载模型model_articles,并将两个值,即$article_title和$article_body传递给函数article_submit((。这是模型中必须将值插入数据库的函数:-
public function article_submit($article_title, $article_body)
{
$article_data = array(
'title' => $article_title,
'body' => $article_body
);
$query_insert_article = $this->db->insert('articles', $article_data);
if($query_insert_article)
{
return true;
}
else
{
return false;
}
}
您需要将控制器功能和ajax更改为试试这个
<script language='JavaScript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script>
$('#submit_article').click(function(){
var article_title = $('input[name="title"]').val();
var article_body = $('textarea[name="body"]').val();
$.ajax({
url: '<?php echo base_url()."main/submit_article";?>/'+article_title+'/'+article_body ,
type: 'POST',
dataType: 'json',
data: $('#form_id').serialize(),/*edit form_id*/
success: function(output_string){
$('#result_table').append(output_string);
}
});
});
</script>
这个是你的控制器
public function submit_article($article_title,$article_body )
{
$this->load->model("model_articles");
if($this->model_articles->article_submit($article_title, $article_body))
{
return true;
}
else
{
return false;
}
}
希望它能解决。。。。。
您需要将JavaScript更改为:
$('#submit_article').click(function(e) {
var article_title = $('input[name="title"]').val();
var article_body = $('textarea[name="body"]').val();
$.ajax({
url: '<?php echo base_url(); ?>main/submit_article',
type: 'POST',
dataType: 'json',
data: 'title=' + article_title + '&body=' + article_body,
success: function(output_string) {
$('#result_table').append(output_string);
}
});
// Add this if you want to prevent the normal form from sending:
e.preventDefault();
});