笨的Ajax表單提交

Question

我使用笨，和jQuery的Forrm插件：http://malsup.com/jquery/form/

我有一個問題得到一個表格才能正常工作。

查看

<div class="row"> 
    <div class="well col-sm-5 col-sm-offset-3"> 
     <h2><span class="fa fa-key"></span>&nbsp;&nbsp;Please login below</h2> 
     <form class="form-horizontal" id="LoginForm" role="form" method="post" action="/login_controller/process" onsubmit="PostFormRedirect('#LoginForm', '#RetMsg', '/');return false;"> 
      <div class="row small-pad"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="fa fa-inbox" style="max-width:20px;min-width:20px;"></i></span> 
        <input type="email" class="form-control" id="UserName" name="UserName" placeholder="Email" /> 
       </div> 
      </div> 
      <div class="row small-pad"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="fa fa-key" style="max-width:20px;min-width:20px;"></i></span> 
        <input type="password" class="form-control" id="UserPass" name="UserPass" placeholder="Password" /> 
       </div> 
      </div> 
      <div class="row small-pad"> 
       <button type="submit" class="btn btn-primary pull-right"><span class="fa fa-sign-in"></span>&nbsp;&nbsp;Sign in</button> 
      </div> 
      <div class="row small-pad center-text"> 
       <a href="/forgot" class="is-ajax-inner" data-where="#RetMsg">Forgot My Password</a> 
      </div> 
     </form> 
     <div id="RetMsg"></div> 
    </div> 
</div> 

控制器

class Login_controller extends CI_Controller { 

    public function __construct(){ 
     $this->load->database(); 
     var_dump('loaded'); 
     exit; 
    } 

    public function process(){ 
     $this->load->model('login_model'); 
     $this->login_model->process(); 
    } 

} 

型號

class Login_model extends CI_Model { 

    function process(){ 
     var_dump('YEP'); 
     exit; 
    } 

} 

PostFormRedirect功能

function PostFormRedirect(FormID, Target, Location){ 
    try{ 
     $subButton = jQuery('[type="submit"]'); 
     var options = { 
      target: Target, 
      beforeSubmit: function() { 
       $subButton.attr('disabled', 'disabled'); 
       jQuery(Target).html('<div class="pageLoader">Loading...<br /><img src="/assets/images/ajax-loader.gif" alt="loading..." height="11" width="16" /></div>'); 
       jQuery(Target).slideDown('fast'); 
      }, 
      success: function (html) { 
       setTimeout(function() { 
             var $t = Math.round(new Date().getTime()/1000); 
             jQuery(Target).html(html); 
             jQuery(Target).slideUp('fast'); 
             if(typeof(Location) !== 'undefined'){ 
              window.location.href = Location + '?_=' + $t; 
             } 
            }, 3000); 
      }, 
      error: function(e){ 
       var $html = e.responseText; 
       jQuery(Target).html($html); 
       jQuery(Target).slideDown('fast'); 
       if(jQuery('#captcha-gen').length){ 
        var $t = Math.round(new Date().getTime()/1000); 
        jQuery.get('/inc/captcha.php?_=' + $t, function(data){ 
         jQuery('#captcha-gen').html(data); 
        }); 
       } 
       $subButton.removeAttr('disabled'); 
      } 
     }; 
     jQuery(FormID).ajaxSubmit(options); 
    }catch(err){ 
     alert(err.message); 
    } 
} 

的.htaccess

# The Friendly URLs part - for normal pages 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule ^(.*)$ index.php/$1 [L,QSA,NC] 

的config/routes.php文件

$route['default_controller'] = 'pages/view'; 
$route['(:any)'] = 'pages/view/$1'; 
$route['404_override'] = ''; 

什麼是happenning是，現在，RetMsg正顯示出我一個404錯誤......我什麼時候才能擺脫404錯誤的， RetMsg再次向我顯示登錄表單。

我在做什麼錯？我期望它給我看var_dump('YEP');

Answer 1

嘗試通過URL（手動）調用您的控制器，如果它的工作沒有與routes.php發佈。

---

請關注並採取在這部分代碼...action="/login_controller/process" onsubmit="PostFormRedirect('#LoginForm', '#RetMsg', '/');...

嘗試編輯動作細看來action="<?= base_url('login_controller/process')?>和base_url()是URL助手（自動加載它）。

---

一些調試技巧：

啓用控制器探查$this->output->enable_profiler(TRUE);不幸的是你的位指示必須正確加載（無404錯誤），但這可能會幫助你在未來甚至在AJAX調用（你可以看到POST數據發送）。在實際的應用程序中禁用這個，因爲JSON數據將被「損壞」。

對於AJAX測試使用谷歌瀏覽器（或FF），右鍵單擊並檢查元素看看網絡選項卡（你已經知道這一點），但現在，每當你進行AJAX調用，將會有行頭/身體等標題，你可以看到什麼網址被稱爲，因此「爲什麼」有404錯誤。

在構造函數中使用這個if/else聲明忽略非AJAX調用

public function __construct() { 
     parent::__construct(); 
     if (!$this->input->is_ajax_request()) { 

      redirect(); //no ajax redirect to home 

     } 

     $this->output->enable_profiler(FALSE); //force to disable profiler 

    }