Question

我正在开发一个基于Ajax的bootsrap3模板。我的索引文件有一个leftside菜单和一个conent块中间的页面，每次我点击这个左侧菜单的子元素时，一个Ajax laod会把页面内容放在这个块中（ajax-content）。*

任何时候我调用任何页面 我的网址通常类似于/index.php#page-one.php ，，除非页面包含表格提交。

当我向表单标记添加动作属性（acion =“page-one.php”）时，会出现问题。表单提交后，我的URL转到/page-one.php; 因此，我得到一个白页，其中包含page-one.php元素，不包括任何CSS样式，当然也没有索引文件的元素。

解决这个问题的正确和最佳方法是什么？

的index.php：

 <body>
    <!--Start Container-->
    <div id="main" class="container-fluid">
        <div class="row">
            <div id="sidebar-left" class="col-xs-2 col-sm-2">
                <ul class="nav main-menu">
                    <li class="dropdown">
                        <a id="configuration" href="#" class="dropdown-toggle">
                            <i class="fa fa-gears"></i>
                            <span class="hidden-xs">Menu-element</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="ajax-link" href="page-one.php">Menu-Subelement-one</a></li>
                            <li><a class="ajax-link" href="page-wo.php">Menu-Subelement-two</a></li>
                        </ul>
                    </li>
                </ul> <!-- end of main-menu-->
            </div>  
            <!--Start Content-->
            <div id="content" class="col-xs-12 col-sm-10">
                <div class="preloader">
                    <img src="img.gif" class="loader" alt="preloader"/>
                </div>
                <!--inside this div a short description/introduction(simple text inside a <p> tag) about the Menu-element will be shown-->
                <div id="content-header"></div>
                <!--inside this div the page content of the Menu-subelement will be shown-->
                <div id="ajax-content"></div>
            </div>
            <!--End Content-->      
        </div>
    </div>
    <!--End Container-->
    <script src="plugins/jquery/jquery-2.1.0.min.js"></script>
    <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="plugin/jquery.form.js"></script>
    <script src="js/script.js"></script>

这是我的script.js：

 //
//  Function for load content from url and put in $('.ajax-content') block
//
function LoadAjaxContent(url){
    $('.preloader').show();
    $.ajax({
        mimeType: 'text/html; charset=utf-8', // ! Need set mimeType only when run from local file
        url: url,
        type: 'GET',
        success: function(data) {
            $('#ajax-content').html(data);
            $('.preloader').hide();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        },
        dataType: "html",
        async: false
    });
}
//////////////////////////////////////////////////////
document.ready
//////////////////////////////////////////////////////
$(document).ready(function () {
    var ajax_url = location.hash.replace(/^#/, '');
    if (ajax_url.length < 1) {
        ajax_url = 'home.php';
    }
    LoadAjaxContent(ajax_url);
    $('.main-menu').on('click', 'a', function (e) {
        var parents = $(this).parents('li');
        var li = $(this).closest('li.dropdown');
        var another_items = $('.main-menu li').not(parents);
        another_items.find('a').removeClass('active');
        another_items.find('a').removeClass('active-parent');
        if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) {
            $(this).addClass('active-parent');
            var current = $(this).next();
            if (current.is(':visible')) {
                li.find("ul.dropdown-menu").slideUp('fast');
                li.find("ul.dropdown-menu a").removeClass('active')
            }
            else {
                another_items.find("ul.dropdown-menu").slideUp('fast');
                current.slideDown('fast');
            }
        }
        else {
            if (li.find('a.dropdown-toggle').hasClass('active-parent')) {
                var pre = $(this).closest('ul.dropdown-menu');
                pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast');
            }
        }
        if ($(this).hasClass('active') == false) {
            $(this).parents("ul.dropdown-menu").find('a').removeClass('active');
            $(this).addClass('active')
        }
        if ($(this).hasClass('ajax-link')) {
            e.preventDefault();
            if ($(this).hasClass('add-full')) {
                $('#content').addClass('full-content');
            }
            else {
                $('#content').removeClass('full-content');
            }
            var url = $(this).attr('href');
            window.location.hash = url;
            LoadAjaxContent(url);
        }
        if ($(this).attr('href') == '#') {
            e.preventDefault();
        }
    });
   $('#formSubmit').ajaxForm(); 

});

页面one.php：

<!--some php code here-->

<form class="validateForm" id="formSubmit" action="page-one.php" method="get">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
    </div>
    <div class="form-group">
        <div class="col-sm-offset-5 col-sm-8">
            <button type="submit" class="btn btn-primary btn-label-left">
                <span><i class="fa fa-save"></i> Save</span> 
            </button>
        </div>
    </div>
</form>

谢谢！

Answer 1

您想如何使用ajax提交表单？

如果您想使用ajax，则应取消默认操作，就像使用e.preventDefault();链接一样。如果您需要帮助，请发布处理表单提交的javascript。

如果您想在不使用ajax的情况下发布到page-one.php，可以在处理表单的php代码之后添加header()重定向，以重定向到您希望在表单后显示的页面得到提交。

Answer 2

我有同样的问题要解决我正在处理的内部网。对我来说，这样做的好方法是避免使用submit方法，而是使用带有js函数的输入按钮来发送表单数据。

就我而言，我这样做了：

<!-- At the top of my webpage -->
<script language='Javascript'>
function loadingAjax(div_id,user,date1,date2)
{
    $("#"+div_id).html('<br><center><img src="images/loading.gif"><br><br><font color="#006699" face="arial" size="4"><b>Loading data<br>VPlease wait ...</b></font></center>');
    $.ajax({
        type: "POST",
        url: "activities.php?USER="+user+"&DATE1="+date1+"&DATE2="+date2,
        success: function(msg){
            $("#"+div_id).html(msg);
        }
    });
}
</script>

<!-- And here is my form -->
    <form id='date_form'>
<input type='text' id='user'><input type='text' id='date1'><input type='text' id='date2'>
<input type='button' onclick="loadingAjax('myDiv',document.getElementById('user').value,document.getElementById('date1').value,document.getElementById('date2').value);">
</form>

这允许您在单独的DIV中发送表单，而无需向所有人显示您的网址。

更多：您甚至可以使用此功能管理左侧菜单选项，以便您的网址保持＆＃39; /index.php'一直以来。

希望这个帮助

此致

尼科

Answer 3

当您通过ajax加载内容时，您可以将内容发布到page-one.php并将用户重定向到它的上一页。但是很难管理并显示错误，成功，表单验证错误等通知消息。另一个我认为最好的解决方案是使用ajax表单提交

如何在提交表单后避免不需要的URL地址更改？

3 个答案: