0

我在通过 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(); ?>

4

3 回答 3

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>

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

于 2012-09-24T07:56:30.977 回答
0

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

  1. 确保您的表单返回 false，以便您将禁用它的默认行为（如http://s.zah.me/IouBgK但经过一些修改，添加return false;并更改data为data : $('#yourformID').serialize(),）。
  2. 您必须在控制器中检查您提交的数据，以查看它是否是 ajax 请求$this->input->is_ajax_request()，然后您将回显验证结果或您的控制器将执行的任何操作。
于 2012-05-03T09:49:50.377 回答
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
  }
 });
}

于 2012-05-03T08:31:10.557 回答