我在通过ajax jquery提交表单时遇到了问题。我的问题是，如何在不刷新页面的情况下将jquery模式表单提交给codeigniter控制器？同时，如果提交的数据包含来自codeigniter控制器的错误（验证），jquery将如何显示错误消息？
这是我的代码
js脚本
$(function() {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 380,
height:300,
buttons: {
'Save': function() {
function submitForm(){
$.ajax({
type : 'POST',
url : 'http://localhost/hmvc/index.php/sysconfig/sysmenu/create',
data : $('#menu_form').serialize(),
success : function(data) {
// Show OK message
alert('ok');
},
error: function(error){
// Show error message
alert('error');
}
});
return false;
}
},
'Cancel': function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
控制器
function _validate()
{
$config = array(
array(
'field'=>'sysmenu_name',
'label'=>'menu name',
'rules'=>'trim|max_length[30]|htmlspecialchars|required|xss_clean'
),
array(
'field'=>'sysmenu_link',
'label'=>'hyperlink',
'rules'=>'trim|max_length[100]|htmlspecialchars|required|xss_clean'
),
array(
'field'=>'sysmenu_sequence',
'label'=>'sequence',
'rules'=>'trim|max_length[2]|htmlspecialchars|required|xss_clean'
)
);
$this->form_validation->set_rules($config);
$this->form_validation->set_error_delimiters('<div class="error_msg">', '</div>');
}
function create()
{
if($this->input->is_ajax_request())
{
$this->_validate();
if($this->form_validation->run($this)==FALSE)
{
echo validation_errors();
}
} else {
$menu_level = getValue_where('sysmenu_level',"sysmenu_id ='".$this->input->post('sysmenu_parent_id')."'",'base_sysmenu') + 1;
$data = array(
'sysmenu_name'=>$this->input->post('sysmenu_name'),
'sysmenu_parent_id'=>$this->input->post('sysmenu_parent_id'),
'sysmenu_link'=>$this->input->post('sysmenu_link'),
'sysmenu_level'=>$menu_level,
'sysmenu_sequence'=>$this->input->post('sysmenu_sequence')
);
$this->sysmenu_model->insert_menu($data);
$this->index();
}
}
查看
<div id="dialog" title="<?php echo $this->lang->line('add_new_menu') ?>">
<div class="notice_msg"><?php echo $this->lang->line('compulsary'); ?></div><br />
<div class="errors"><!-- append the error message here --></div>
<?php echo form_open('','class=normal_form name=create_menu id=menu_form'); ?>
<label><?php echo $this->lang->line('menu_name'); ?></label><?php echo form_input('sysmenu_name'); ?>*<br />
<label><?php echo $this->lang->line('parent_menu'); ?></label><?php //echo form_input('sysmenu_parent_id'); ?><?php echo form_dropdown('sysmenu_parent_id', dropdown_where('sysmenu_id','sysmenu_name',"sysmenu_level = 1",'base_sysmenu'), ''); ?><br />
<label><?php echo $this->lang->line('menu_link'); ?></label><?php echo form_input('sysmenu_link'); ?>*<br />
<label><?php echo $this->lang->line('menu_sequence'); ?></label><?php echo form_input('sysmenu_sequence','','size=12, maxlength=2'); ?>*<br />
<label> </label><?php //echo form_submit('data',$this->lang->line('btn_save')); ?>
<?php echo form_close(); ?>
答案 0 :(得分：1)
使用以下标准。
在Controller类中使用方法初始化View Page。
public function CreateStudents() {
$this->load->helper('form'); // include form helper
$data['title'] = "Create Students Page"; //Title of the page
$this->load->view('templates/header', $data); // header
$this->load->view('createstudents', $data); // main content
$this->load->view('templates/footer', $data); // footer
}
然后创建Ajax方法。提交表单时，此方法即执行。
public function CreateStudentsAjax() {
$this->load->helper('form');
$this->load->library('form_validation');
$this->form_validation->set_error_delimiters('', '');
$this->form_validation->set_rules('roll', 'Roll Number', 'required');
$this->form_validation->set_rules('name', 'Name', 'required');
$this->form_validation->set_rules('phone', 'Phone', 'required');
if ($this->form_validation->run()) {
$this->welcome_model->InsertStudents();
echo json_encode("Oks");
} else {
$data = array(
'roll' => form_error('roll'),
'name' => form_error('name'),
'phone' => form_error('phone')
);
echo json_encode($data);
}
}
在“查看”页面中添加表单
<div id="message">
</div>
<?php echo form_open('welcome/CreateStudentsAjax'); ?>
<label for="roll">Student Roll Number</label>
<input type="text" id="txtRoll" value="" name="roll"/>
<label for="Name">Students Name</label>
<input type="text" id="txtName" value="" name="name"/>
<label for="Phone">Phone Number</label>
<input type="text" id="txtPhone" value="" name="phone"/>
<input type="submit" name="submit" value="Insert New Students" />
<?php echo '</form>'; ?>
脚本
<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function(){
//alert('ok');
$.ajax({
url:this.action,
type:this.method,
data:$(this).serialize(),
success:function(data){
var obj = $.parseJSON(data);
if(obj['roll']!=null)
{
$('#message').text("");
$('#message').html(obj['roll']);
$('#message').append(obj['name']);
$('#message').append(obj['phone']);
}
else
{
$('#message').text("");
$('#message').html(obj);
}
},
erro:function(){
alert("Please Try Again");
}
});
return false;
});
});
</script>
这就是全部。希望大家都喜欢这些代码。
答案 1 :(得分：0)
您必须手动提交表单，并在AJAX调用中处理成功/错误。
在Save：
function submitForm(){
$.ajax({
type : "POST",
url : "sysconfig/sysmenu/create",
data : postData, // Add your form data as inputname1=value1&inputname2=value2....
success : function(data) {
// Show OK message
},
error: function(error){
// Show error message
}
});
}
function submitForm(){
$.ajax({
type : "POST",
url : "sysconfig/sysmenu/create",
data : postData, // Add your form data as inputname1=value1&inputname2=value2....
success : function(data) {
// Show OK message
},
error: function(error){
// Show error message
}
});
}
答案 2 :(得分：0)
我会尝试提供帮助，但您必须对其进行测试：
return false;并将data更改为是data : $('#yourformID').serialize(),）。$this->input->is_ajax_request()检查控制器中提交的数据以查看其是否为ajax请求，然后您将回显验证结果或控制器将执行的操作。