个人中心
gpt4 book ai didi

javascript - 如何避免表单提交后 URL 地址发生意外更改？

转载 作者：行者123 更新时间：2023-11-28 10:54:28 27 4
gpt4 key购买 nike

我正在开发一个基于 Ajax 的 bootsrap3 模板。我的索引文件有一个左侧菜单和页面中间的内容 block ，每次我单击此左侧菜单的子元素时，Ajax laod 都会将页面内容放入此 block 中(ajax-content)。*

任何时候我调用任何页面， 我的 URL 通常看起来像这样/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(); 

});

page-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>

谢谢!

最佳答案

我工作的 Intranet 也有同样的问题需要解决。对我来说，最好的方法是避免使用提交方法，而是使用带有 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 中发送您的表单，而无需向所有人显示您的 URL。

更多:您甚至可以使用此功能来管理左侧菜单选择，以便您的 URL 始终保持“/index.php”。

希望这有帮助

问候

妮可

关于javascript - 如何避免表单提交后 URL 地址发生意外更改？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26717537/

27 4 0
文章推荐： html - 如何创建一个下拉菜单，而不是向上显示？
文章推荐： ios - 创建一个介于 0 和 1 之间的比例，即使传入的数字更高
文章推荐： css - 诺基亚 lumia 920 上的响应式网站
文章推荐： css - 为什么 form-inline 的元素之间没有空格？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com