Question

伙计们，我正在尝试使用ajax提交表单，但是我不知道到底发生了什么，因为它没有将值发布到数据库中的表中，这是我第一次使用ajax进行表单提交，谁能帮忙我犯了什么错误。

这是我的查看代码：

<html>

<head>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
    <script type='text/javascript' src="<?php echo base_url(); ?>assets/theme1/js/jquery-2.1.3.min.js"></script>
    <!-- <script type="text/javascript"> -->
    <script type = "text/javascript">

        // Ajax post
        $(document).ready(function() {
            $('form').submit(function(e) {
                e.preventDefault();
                var organisation_name = $("input#organisation_name").val();
                jQuery.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>" + "Organisation/createOrg",
                    dataType: 'json',
                    data: { organisation_name: organisation_name },
                    success: function(res) {
                        if (res) {
                            // Show Entered Value
                            jQuery("div#result").show();
                            jQuery("div#value").html(res.organisation_name);
                        }
                    }
                });
            });
        });
    </script>
    <div class="modal fade" id="createGroup" tabindex="-1" role="dialog" aria-labelledby="createGroup" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="modal-content">
                <form action="" id="user-groups-create" class="form-horizontal" method="post">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Create a New Organisation</h4>
                    </div>
                    <div class="modal-body" id="modal-body">
                        <div class="form-group">
                            <label for="group_name" class="col-sm-4 control-label">New Organisation Name : </label>
                            <div class="col-md-8">
                                <input type="text" id="organisation_name" name="organisation_name" class="form-control" placeholder="Organisation Name" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" value="submit" class="btn btn-primary submit" id="submit">Create Organisation</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

这是我控制器的方法createOrg：

public function createOrg() {
    $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
    //Validating Name Field
    $this->form_validation->set_rules('organisation_name', 'organisation_name', 'required|min_length[5]|max_length[15]');
    if ($this->form_validation->run() == FALSE) {
        $this->session->set_flashdata('error', 'Organisation name need to be more than 3 characters and less than 15.');
        redirect('Organisation', $error);
    } else {
        //Setting values for tabel columns
        $data = array(
            'organisation_name' => $this->input->post('organisation_name')
        );
        //Transfering data to Model
        $this->Org_model->orgInsert($data);
        $this->session->set_flashdata('success', 'Organisation created.');
        //Loading View
        redirect('Organisation');
    }
}

这是我的模型的方法orgInsert：

function orgInsert($data) {
    // Inserting in Table(organisation)
    $this->db->insert('organisation', $data);
}

任何人都可以帮助我，我做错了什么，我已经正确检查了我的代码，但我没有找到我做错的确切位置，我希望提交后直到用户单击关闭后，我的模式弹出窗口都应该在那里按钮。当我尝试在jQuery.ajax({之后保持警戒时，它就不会发出警报。并且我可以从var organisation_name中获取警报中的值...

谢谢。

Answer 1

希望这对您有用：

$('#user-groups-create').on('submit',function(e){
    var organisation_name = $("#organisation_name").val();
    $.ajax({
      type: "POST",
      url: "<?=site_url('Organisation/createOrg');?>",
      dataType: 'json',
      data: {'organisation_name': organisation_name},
      success: function(res) {
        if (res)
        {
          alert(res);
          window.location.href = "<?=site_url('Organisation');?>";
          $("div#result").show();
          $("div#value").html(res.organisation_name);
        }
      },
    });
  e.preventDefault();
});

您控制器的方法createOrg应该是这样的：

public function createOrg() 
{
    $data = array(
        'organisation_name' => $this->input->post('organisation_name')
    );
    //Transfering data to Model
    $this->Org_model->orgInsert($data);
    $this->session->set_flashdata('success', 'Organisation created.');
    echo json_encode($data);
    exit;
    }
}

Answer 2

通过将脚本更改为这样来进行工作

   <script type="text/javascript">
// Ajax post
 $(document).ready(function() {
 $('form').submit(function(e){
 e.preventDefault();
 var organisation_name = $("input#organisation_name").val();

$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "Organisation/createOrg",
dataType: "html",
data: {organisation_name: organisation_name},
success: function(data) {
alert('success');
}
});
});
});

</script>

提交时的Ajax在Codeigntier中无法使用页面刷新

2 个答案: