Form表单提交，页面不跳转的方法
1.1 解决方案一
表单action提交数据，但页面不跳转，可以使用Iframe解决。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form提交表单页面不跳转</title>
</head>
<body>
<form action="" method="post" target="myIframe">
<label for="input_text">账户：</label>
<input type="text" id="input_text" name="input_text">
<label for="input_pwd">密码：</label>
<input type="text" id="input_pwd" name="input_text">
<input type="submit" id="submit" name="submit" value="提交">
</form>
<iframe id="myIframe" name="myIframe"></iframe>
</body>
</html>
注意：Form元素的target属性一定是指定要显示返回结果的iframe元素的name属性。
Iframe元素可以放到body中的任何位置，也可以放到form元素中。
1.2 采用Ajax来实现，无刷新技术
用javascript直接读取input元素的值，然后放到函数中的变量让ajax去处理。
实例——js serialize或serializeArray方法来序列化表单数据：
<form>
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>
<button id="btn">序列化表单值</button>
$("#btn").click(function(){
var x=$("form").serializeArray();
console.log(x); //执行结果：[{name: "FirstName", value: "Bill" },{name: "LastName", value: "Gates" }]
var y=$("form").serialize();
console.log(y); //执行结果：FirstName=Bill&LastName=Gates
});
注意：serializeArray()方法会返回一个json值，而serialize()方法则会返回一个string值。
分享到：
相关推荐
layui使用form表单实现post请求，避免信息泄露(设置form表单隐藏，也可以初始化时隐藏)： 这里是在数据表格查询数据时的按钮操作，其他操作类似 <table id=myTable class=layui-table lay-filter=myTableDetail></...
form提交后不跳转，增强用户体验。 工程采用jquery写前端，struts2做一个跳转返回数据。
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、设计源码 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ />...Form提交表单页面不跳转</title> </head> <b
在一个jsp页面中，定义了一个用户登录界面（以form表单定义），但要达到检验输入的信息的合法性，就需要对输入的用户信息作判断，那么自然就需要取出其中的值。有的页面可以用action传参来得到form中输入的信息值，...
主要介绍了Form表单提交刷新页面如何不跳转，实现源码如下，大家不妨参考参考
点击submit按钮或直接回车可以将数据提交到saveReport页面，但是提交后也会跳转到saveReport页面 如何做到 将数据提交到saveReport（form的action指向）页面，但是页面又不进行跳转，即保持当前页面不变呢？...
在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，...
网页回车后form自动提交，跑到其他页面 有个查询的form，本来是希望点击查询时才查询的，结果测试到回车时跑到其他页面去了。 复制代码代码如下: <form action=”notice.php” method=”get”> … <...
所以 form 表单提交 和 $.ajax 都是默认 application/x-www-form-urlencoded 请求长这个样子 curl 'http://192.168.11.88:8080/r_server_manager/api/open/user/vo' -H 'Connection: keep-alive' -H 'Prag
优点是不刷新页面，不跳转页面，静默提交的。 至于什么是ajax，自己去百度了解。 首先我们得要有一个表单提交页面： index.html 这个页面由两个部分组成 1、表单控件 2、jQuery+ajax处理脚本 jQuery脚本会获取...
form表单的action 与url跳转是不一样的：form表单可以给后台传递数据，url跳转到action只能通过url的参数来传递数据，不懂的朋友可以参考下
主要介绍了mvc form表单提交的几种形式整理总结的相关资料,这里提供了几种方法及实例代码，需要的朋友可以参考下
1.1 通过submit 按钮提交后 会根据form的属性action=“路径”来跳转到相应的路径，这时，给form添加一个 onsubmit =”return check()” 属性， check()使我们要写的验证函数，如下图： <form action
解决form表单提交后接收返回信息而不用跳转页面 解决form表单提交后接收返回信息而不用跳转页面 解决form表单提交后接收返回信息而不用跳转页面
本文介绍了如何通过js实现表单提交后不重新刷新当前页面的方法实例.既提交了FORM保存了数据,页面也不会跳转，很实用。需要的朋友可以参考下
页面跳转，提交参数 var form = new form_util.form({ url: uri, method: 'POST', target: '_self', params: param }); $(form).submit();