使用 CodeIgniter 和 Ajax 使用 Bootstrap Modal 更新数据

Question

我试图弄清楚为什么我无法从模式中的表单验证中获得警报警告或成功。我首先想要的是更新数据库中的数据并且它可以工作。现在我看不到警报是否错误或正确，提交后模态关闭以及如何将 echo json_encode 转移到模态警报

视图：布局视图

 $('#login_form').on('submit', function( event ){
  event.preventDefault();
  var Admin_id = $('#Admin_id').val();
  var username = $('#username').val();
  var email    = $('#email').val();
  var contact  = $('#contact').val();
  var hoax     = $('#hoax').val();
  var confirm  = $('#confirm').val();
  var date     = $('#date').val();

  $.ajax({
      url: "<?php echo base_url('profile/profile_update'); ?>",
      method: "POST",
      data: {Admin_id:Admin_id, username:username, email:email, 
      contact:contact, confirm:confirm, date:date, hoax:hoax},
      dataType: "json",
      success: function(data){
          if (data.result){
         $('#result').html('<p class="alert-success"> The inputs are insufficient </p>');
       }else{
         $('#result').html('<p class="alert-warning"> The profile successfully updated</p>');
       }
          //return false;
          //event.preventDefault();
      }
  });
  return false;
  //event.preventDefault();
});

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="profile" id="1" href="#Profile_modal" data-toggle="modal">Profile</a>

<div class="modal" id="Profile_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" >
    <div class="modal-content">
      <div class="modal-header bg-secondary">
        <h5 class="modal-title text-white">Profile</h5>
        <button type="button " class="close" data-dismiss="modal" aria-label="Close">
          <span class="text-white" aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" >
        <div class="text-center" id="result"> </div>
        <div id="data_profile"> </div>
      </div>
    </div>
  </div>
</div>

控制器：profile/profile_update

public function profile_update(){
    $this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[3]');
    $this->form_validation->set_rules('email', 'Email', 'trim|required|min_length[13]');
    $this->form_validation->set_rules('contact', 'Contact', 'trim|required|min_length[11]');
    $this->form_validation->set_rules('hoax', 'Password', 
    'trim|required|min_length[6]|matches[confirm]');
    $this->form_validation->set_rules('confirm', 'ConfirmPassword', 'trim|required|min_length[6]');
    
    
    if ($this->form_validation->run() == FALSE) {
        $data = array('profile_errors' => validation_errors());
        echo json_encode(array("result"=>false));
        
     }else{
        
        $this->load->model('admin_model');
        $data=$this->profile_model->update_data();
        //$data = 'Your Profile Data has been Updated Successfully';
        echo json_encode(array("result"=>true));
        
     }  
}

profile/get_fetchdata()

public function get_fetchdata(){
    $Admin_id = $this->input->post('Admin_id');
    if(isset($Admin_id) and !empty($Admin_id)){
        $records = $this->profile_model->fetch_data($Admin_id);
        $output = '';

        foreach ($records->result_array() as $row) {                
            $attributes = array('id'=>'login_form', 'class'=>'form');

            $output = '<div class="text-center" id="result"> </div>';

            echo form_open('profile/profile_update', $attributes);

            $output = '
              <div class="form-group text-left">
                <label> Username </label>
                <input type="text" id="username" class="form-control" value='. $row["username"] .' placeholder="Enter Username" name="username" maxlength="10" required>
              </div>

              <div class="form-group text-left">
                <label> Email </label>
                <input type="Email" id="email" class="form-control" value='. $row["email"] .' placeholder="Enter Email" name="email" maxlength="20" required>
              </div>

              <div class="form-group text-left">
                <label> Phone Number</label>
                <input type="number" id="contact" class="form-control" value='.$row["contact"].' placeholder="Enter Phone Number" name="contact" maxlength="11" required>
              </div>

              <div class="form-group text-left">
                <label> Password </label>
                <input type="password" id="hoax" class="form-control" value='. $row["hoax"].' placeholder="Enter Password" name="hoax" maxlength="15" required>
              </div>

              <div class="form-group text-left">
                <label> Confirm Password </label>
                <input type="password" id="confirm" class="form-control" value='.$row["hoax"].' placeholder="Confirm Password" name="confirm" maxlength="15" required>
              </div>
              
              <input type="hidden" id="Admin_id" class="form-control" value='. $row["Admin_id"] .' name="Admin_id">
              <input type="hidden" id="date" class="form-control" value='. $row["date_modified"] .' name="date">

              <button class="btn btn-primary float-right new_profile" id="1" name="submit" type="submit" >Save</button>
              <button class="btn btn-danger mx-2 float-right" data-dismiss="modal" type="button"> Cancel </button>';
            echo form_close();
        }
        echo $output;
    }else {
        echo "Nothing to show";
    }
}

Answer 1

如果你使用 json 作为 dataType，浏览器会一直等待 JSON 响应，所以这里最好的做法是：

if($this->form_validation->run() == FALSE){
    echo json_encode(array("result" => false, "message" => "Failed"));
}else{
    echo json_encode(array("result" => true, "message" => "Success!"));
}

您可以使用以下方法检查 ajax 端的结果：

$('#login_form').on('submit', function( event ){
  event.preventDefault();
  var Admin_id = $('#Admin_id').val();
  var username = $('#username').val();
  var email    = $('#email').val();
  var contact  = $('#contact').val();
  var hoax     = $('#hoax').val();
  var confirm  = $('#confirm').val();
  var date     = $('#date').val();

  $.ajax({
      url: "<?php echo base_url('profile/profile_update'); ?>",
      method: "POST",
      data: {Admin_id:Admin_id, username:username, email:email, 
      contact:contact, confirm:confirm, date:date, hoax:hoax},
      dataType: "json",
      success: function(data){
          if(data.result){
                  $('#adminId').val("");
                  $('#username').val("");
                  $('#email').val("");
                  $('#contact').val("");
                  $('#hoax').val("");
                  $('#confirm').val("");
                  $('#date').val("");
              $('#result').html('<p class="alert-success"> ' + data.message + ' </p>');
          }else{
              $('#result').html('<p class="alert-warning"> ' + data.message + ' </p>'); 
          }
          //return false;
          //event.preventDefault();
      }
  });
  return false;
  //event.preventDefault();
});