如何避免表单提交后出现不希望的URL地址更改
How can I avoid an undesired URL address change after a form submission?
我正在开发一个基于Ajax的bootsrap3模板。我的索引文件有一个左侧菜单和一个位于页面中间的锥形块,每次我点击这个左侧菜单的子元素时,Ajax laod都会将页面内容放在这个块中(Ajax内容)。*
每当我调用任何页面时, 我的URL通常看起来像/index.php#page one.php,,除非页面包含表单提交。
当我将操作属性(acion="pageone.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>
这是我的脚本.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也有同样的问题需要解决。对我来说,最好的方法是避免使用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中发送您的表单,而不必向所有人显示您的URL。
更多:您甚至可以使用此功能来管理左侧菜单的选择,以便您的URL始终保持"/index.php"。
希望这能帮助
问候
尼科
您希望如何使用ajax提交表单?
如果您想使用ajax,您应该取消默认操作,就像使用e.preventDefault();
处理链接一样。如果您需要帮助,请发布处理表单提交的javascript。
如果您想在不使用ajax的情况下发布到page-one.php
,您可以在处理表单的php代码之后添加header()
重定向,以重定向到您希望在表单提交后显示的页面。
当您通过ajax加载内容时,您可以将内容发布到page-one.php,并将用户重定向到它的上一个页面。但它将很难管理和显示错误、成功、通知消息,如表单验证错误等。另一个也是我认为最好的解决方案是使用ajax表单提交
- 给定 HTML 文件的 URL 地址,如何读取内容
- 从URL地址获取数据
- I'm试图创建一个html表单,根据字段的输入生成url地址
- 自动关闭当前窗口并使用新的URL地址打开新窗口
- 禁止在 URL 地址栏上使用 Javascript
- 如何从 UI 路由器中的 URL 地址中删除哈希标记 (#)
- 在 PHP 的 URL 地址栏中传递 Javascript 链接
- Javascript 和 HTML - 在 html 代码中返回 url 地址
- 如何使用 jquery/JS 更改 url 地址
- 无法导航到 URL 地址栏,只能通过单击链接
- 如何避免表单提交后出现不希望的URL地址更改
- 正则表达式在URL地址测试中失败
- 如何允许用户指定使用Ajax加载内容的幻灯片编号和URL地址
- ui路由器通过URL地址更改状态
- 直接从url地址栏调用javascript函数
- 将每个字符串块附加到不同的url地址
- 将参数附加到URL地址在多个函数中不起作用(第二个函数不变)
- 如何验证url地址(不是语法,而是网络)
- 如何使用javascript或jquery禁用url地址栏
- 使用javascript修改url地址