Question

我需要帮助解决这个问题，我有一个简单的表单登录，我使用Framework7一个JQuery，问题是当我发送帖子数据时这个返回总是404错误：

HTML，这是使用Framework7针对Android优化的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>

THE SCRIPT ---这是有问题的脚本，post动作总是返回404 ERROR，我使用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();
        });
    });
});

Answer 1

我想你忘了在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

Answer 2

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();
    });
});
});

这对你有用。

表单登录Framework7

2 个答案: