通过jquery模态提交表单到codeigniter控制器

Question

我在通过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>&nbsp;</label><?php //echo form_submit('data',$this->lang->line('btn_save')); ?>
<?php echo form_close(); ?>

Answer 1

使用以下条件。

在Controller类中，使用一种方法初始化“查看页面”。

 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>

这就是全部。 希望大家喜欢。

Answer 2

您必须手动提交表单，并在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 } }); } 

Answer 3

我会尽力帮助您，但您必须进行测试：

1. 确保您的表单返回false，以便您将禁用表单的默认行为（如http://s.zah.me/IouBgK所示，但进行一些修改后，添加return false;然后将data更改为data : $('#yourformID').serialize(), ）。
2. 您将必须使用$this->input->is_ajax_request()在控制器中检查提交的数据，以查看其是否是ajax请求，然后将回显验证结果或控制器将执行的操作。