2016-03-07 198 views
-1

请我需要帮助解决这个问题,我有一个简单的登录表单,我使用Framework7的JQuery的,问题是,当我发送POST数据这一回报总是404错误:表单登录Framework7

的HTML,这个为Android优化,Framework7 HTML代码,很简单

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- Required meta tags--> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <!-- Color theme for statusbar --> 
    <meta name="theme-color" content="#2196f3"> 
    <!-- Your app title --> 
    <title>Control</title> 
    <!-- Path to Framework7 Library CSS, Material Theme --> 
    <link rel="stylesheet" href="assets/framework/css/framework7.material.min.css"> 
    <!-- Path to Framework7 color related styles, Material Theme --> 
    <link rel="stylesheet" href="assets/framework/css/framework7.material.colors.min.css"> 
    <!-- Path to your custom app styles--> 
    <link rel="stylesheet" href="assets/framework/css/my-app.css"> 
    </head> 
    <body> 
    <!-- Views --> 
    <div class="views"> 
     <!-- Your main view, should have "view-main" class --> 
     <div class="view view-main"> 
     <!-- Pages container, because we use fixed navbar and toolbar, it has additional appropriate classes--> 
     <div class="pages navbar-fixed toolbar-fixed"> 
      <!-- Page, "data-page" contains page name --> 
      <div data-page="index" class="page"> 

      <!-- Top Navbar. In Material theme it should be inside of the page--> 
      <div class="navbar"> 
       <div class="navbar-inner"> 
       <div class="center">CONTROL</div> 
       </div> 
      </div> 

      <!-- Scrollable page content --> 
      <div class="page-content"> 
        <div class="content-block"> 
        <p align="center"><img src="assets/images/logo.png" alt=""/></p> 

        <form action="http://www.nenego.com/sisteseg/login.php" method="post" enctype="application/x-www-form-urlencoded" class="list-block inset" id="form-login" accept-charset="UTF-8"> 
         <ul> 
         <li> 
          <div class="item-content"> 
          <div class="item-media"><i class="icon icon-form-name"></i></div> 
          <div class="item-inner"> 
           <div class="item-title label">Usuario</div> 
           <div class="item-input"> 
           <input type="text" name="vf_username" id="vf_username"> 
           </div> 
          </div> 
          </div> 
         </li> 
         <li> 
          <div class="item-content"> 
          <div class="item-media"><i class="icon icon-form-password"></i></div> 
          <div class="item-inner"> 
           <div class="item-title label">Contraseña</div> 
           <div class="item-input"> 
           <input type="password" name="vf_password" id="vf_password"> 
           </div> 
          </div> 
          </div> 
         </li> 
         <li> 
          <div class="item-content"> 
          <div class="item-media"><i class="icon icon-form-toggle"></i></div> 
          <div class="item-inner"> 
           <div class="item-title label">Recordarme</div> 
           <div class="item-input"> 
           <label class="label-switch"> 
           <input type="checkbox" name="vf_remember" id="vf_remember"> 
           <div class="checkbox"></div> 
           </label> 
           </div> 
          </div> 
          </div> 
         </li> 
         </ul> 
         <div class="content-block"> <input type="submit" value="Entrar" class="button button-big button-fill" id="btn-submit" > </div> 
        </form> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- Path to Framework7 Library JS--> 
    <script type="text/javascript" src="assets/framework/js/framework7.min.js"></script> 
    <!-- Path to your app js--> 
    <script src="assets/js/jquery-1.12.1.min.js"></script> 
    <script type="text/javascript" src="assets/framework/js/my-app.js"></script> 
    </body> 
</html> 

脚本---这是有问题的剧本,岗位操作总是返回404错误,我使用JQuery

var _APP_TITLE = 'Control'; 

var myApp = new Framework7(); 
var mainView = myApp.addView('.view-main'); 

var $$ = Dom7; 

$(function(){ 
    $('#form-login').on('submit', function(e){ 
     e.preventDefault(); 

     myApp.showPreloader(); 

     var form_url = $(this).attr('action'); 
     var form_data = $(this).serialize(); 

     var form_ajax = $.ajax({ 
      url: form_url, 
      type: 'POST', 
      dataType: 'json', 
      data: form_data 
     }); 

     form_ajax.done(function(response){    
      if(response.result === 'success'){ 
       mainView.router.loadPage({url:'home.html', ignoreCache:true, reload:true}); 
       mainView.router.refreshPage(); 
      }else{ 
       myApp.alert('Sus datos de accesos son incorrectos, intente nuevamente.', _APP_TITLE); 
      } 
     }); 

     form_ajax.fail(function() { 
      myApp.alert('Error al intentar iniciar sesión', _APP_TITLE); 
     }); 

     form_ajax.always(function() { 
      myApp.hidePreloader(); 
     }); 
    }); 
}); 

回答

0

我想你忘了在addView后初始化页面。

你的js代码应该是这样的。

var _APP_TITLE = 'Control'; 
var myApp = new Framework7(); 
var $$ = Dom7; 
var mainView = myApp.addView('.view-main'); 

$$(document).on('pageInit', function (e) { 
    var page = e.detail.page; 
    switch(page.name){ 
    case 'index': 

    $(function(){ 
     $('#form-login').on('submit', function(e){ 
     e.preventDefault(); 

     myApp.showPreloader(); 

     var form_url = $(this).attr('action'); 
     var form_data = $(this).serialize(); 

     var form_ajax = $.ajax({ 
      url: form_url, 
      type: 'POST', 
      dataType: 'json', 
      data: form_data 
     }); 

     form_ajax.done(function(response){    
      if(response.result === 'success'){ 
      mainView.router.loadPage({url:'home.html', ignoreCache:true, reload:true}); 
      mainView.router.refreshPage(); 
      }else{ 
      myApp.alert('Sus datos de accesos son incorrectos, intente nuevamente.', _APP_TITLE); 
      } 
     }); 

     form_ajax.fail(function() { 
      myApp.alert('Error al intentar iniciar sesión', _APP_TITLE); 
     }); 

     form_ajax.always(function() { 
      myApp.hidePreloader(); 
     }); 
     }); 
    }); 
    break; 
    } 
}); 

我试过了,页面会转移到'http://www.nenego.com/sisteseg/login.php'。

参考:http://framework7.io/docs/pages.html

0
var myApp = new Framework7({ 
modalTitle: "Control" 
}); 
var $$ = Dom7; 
var mainView = myApp.addView('.view-main'); 
$(function(){ 
$('#form-login').on('submit', function(e){ 
    e.preventDefault(); 

    myApp.showPreloader(); 

    var form_url = $(this).attr('action'); 
    var form_data = $(this).serialize(); 

    var form_ajax = $.ajax({ 
     url: form_url, 
     type: 'POST', 
     dataType: 'json', 
     data: form_data 
    }); 

    form_ajax.done(function(response){    
     if(response.result === 'success'){ 
      mainView.router.loadPage({url:'home.html', ignoreCache:true, reload:true}); 
      mainView.router.refreshPage(); 
     }else{ 
      myApp.alert('Sus datos de accesos son incorrectos, intente nuevamente.', _APP_TITLE); 
     } 
    }); 

    form_ajax.fail(function() { 
     myApp.alert('Error al intentar iniciar sesión', _APP_TITLE); 
    }); 

    form_ajax.always(function() { 
     myApp.hidePreloader(); 
    }); 
}); 
}); 

这应该为你工作。