js – form表单提交不刷新

全栈程序员站长

发布于 2022-08-01 15:06:48

14.6K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

大家已经发现了, 当我们点击submit提交form表单的时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法:

利用iframe

我们可以利用一个隐藏的iframe来实现, 主要是我们把提交目标放到一个隐藏的iframe里, 然后让iframe提交数据

(ps: 这个未实测, 仅仅是网上提供的, 我记录一下. 以后遇到或者会试一下吧)

<form action="" method="post" target="the_iframe">  
    <input; type="text" id="id_input_text" name="the_input_text" />  
    <input type="submit" id="id_submit" name="the_submit" value="提交" />  
</form>  
<iframe id="is_iframe" name="the_iframe" style="display:none;"></iframe>

利用onsubmit事件

我们还可以绑定onsubmit事件(用jq的话是submit()), 在submit按钮效果触发之前我们就把数据提交了, 然后我们return false(让submit这次的点击触发事件失效, 否则表单又会提交一次, 并且刷新页面)

我们可以这样:

====== 如果你用原生js的话

html代码:

<form id="err_form" onsubmit="return post_data()">
	<input type="text" name="contact" name="address" autofocus="autofocus" placeholder="您的联系方式?" />
	<input type="text" name="title" maxlength="10" placeholder="10字以内的提要 (可不填)" />
	<textarea name="errmessage" required="required" maxlength="150" rows="7" placeholder="请输入问题描述(必填,150字以内)"></textarea>
	<input type="submit" id="sub" value="提交" />
</form>

js代码:

function post_data(){
	// ajax数据提交代码
	// .....

	return false;	//重要!一定要写
}

/* 18-1-17更新 */

这里有一个小技巧, 刚刚发现的.

我们在绑定onsubmit的时候是把return false放进onsubmit后面的调用函数内的, 这样子如果你的函数出现了错误, 将不会继续执行到函数最后’return false’这里, 还是会出现刷新的现象;

我们应该把return false写到绑定事件中. 为了安全起见, 我们可以不用去掉函数的return false.

<form id="err_form" onsubmit="post_data();return false;">

/* ======================= */

====== 如果你用jq

html 代码:

<form id="err_form">
	<input type="text" name="contact" name="address" autofocus="autofocus" placeholder="您的联系方式?" />
	<input type="text" name="title" maxlength="10" placeholder="10字以内的提要 (可不填)" />
	<textarea name="errmessage" required="required" maxlength="150" rows="7" placeholder="请输入问题描述(必填,150字以内)"></textarea>
	<input type="submit" id="sub" value="提交" />
</form>

js代码:

$(document).ready(function() {
	$('#err_form').submit(function() {	//这次我们这么绑定
		var contact = $("input[name='contact']").val();
		var title = $("input[name='title']").val();
		var errmessage = $("textarea[name='errmessage']").val();				
		var err_data = {
			contact: contact,
			title: title,
			errmessage: errmessage
		}
		$.ajax({
			// ajax提交代码....
		});
			return false;	//还是要return false, 跟上面一样的道理
	});
});

以上!

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/125952.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月1，如有侵权请联系 cloudcommunity@tencent.com 删除

java