您的位置：首页 > Web前端 > HTML

html<a>标签转跳后台自动提交问题 3ff0

2017-06-28 10:46 411 查看

最近为了测试后台输出写前端页面的时候遇到了用<a>标签转跳页面的时如果转跳到的页面有form表单的话会出现自动提交该表单的问题

我有<a>标签的网址代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>测试</title>
</head>
<body>
<div id="main">
<a th:href="@{./page/commentTest}">评论基础测试</a><br />
</div>
</body>
</html>

要转跳到的网址代码

<script th:src="@{../assets/js/jquery-2.1.4.min.js}"	type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
function query_states_id(){
console.log("查询所有漫友圈状态id！");
myAjax("GET","/state/ids","",function(list){
var ids="";
list=list.list;
//console.log(list);
for(var i in list){
ids+="<option value='"+list[i]+"'>"+list[i]+"</option>";
}
$("#state_id").html(ids);
});
var btn=$("form input[type=submit]");
//写btn.click(sub_form());会直接在加载完成后直接运行，且点击事件无效
console.log(btn[0]);
btn[0].click(function(){alert(1);});//经检测是这行代码导致自动提交的
}

/*]]>*/
</script>
</head>
<body onload="query_states_id()">
<div>
<span><a th:href="@{/}">返回首页</a></span>
<form th:action="@{/state/get/one}" method="get"
enctype="multipart/form-data">
根据id查找漫友圈状态：<select name="state_id" id="state_id">
<option>加载中...</option>
</select>
<input value="查询" type="submit" />
</form>
</div>
<div>
<div name="show"></div>
<div name="com_ctrl"></div>
</div>
</body>
</html>

也就是说如果转调至页面如果有<form>标签的话<a>标签会自动模拟一次提交事件，将该form的onsubmit设为false就行

function query_states_id(){
console.log("查询所有漫友圈状态id！");
myAjax("GET","/state/ids","",function(list){
var ids="";
list=list.list;
//console.log(list);
for(var i in list){
ids+="<option value='"+list[i]+"'>"+list[i]+"</option>";
}
$("#state_id").html(ids);
});
var f=$("form")[0];
console.log(f);
$(f).attr("onsubmit","return false");//阻止表单提交
console.log($(f).find("input[type=submit]"));
$(f).find("input[type=submit]").click(form_submit);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航