如何在点击submit按钮后，组织<form>表单跳转

最新推荐文章于 2022-07-22 10:22:13 发布
最新推荐文章于 2022-07-22 10:22:13 发布
阅读量7.1k 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daijiguo/article/details/50730166
版权

有两种方法：

1、讲submit按钮设置为type=“button”，用ajax进行后台提交数据

2、

$('#form').submit(function () {
         return false;
})

return false之后，<form action="***">就不会跳转了

 

daijiguo
关注
专栏目录
html提交成功跳转页面,提交表单后跳转到想要的页面--jQuery form
weixin_35794520的博客
06-03 1万+
表单提交的问题一直困扰着我这个新手，现在也算学习了不少，解决了我现在有的问题 —— 提交了表单之后将数据给到后台并且让前端页面跳转到想要的页面或出现想要的内容。用到了 jQuery Form Plugin，表单提交的第三方插件，为了更方便的管理和提交表单。(官网：http://plugins.jquery.com/form/)借鉴：https://blog..net/m0_37505854/art...
vant表单点击提交没有触发验证_点击提交按钮后submit事件没有被触发
weixin_39786141的博客
12-22 2742
var forms = document.querySelectorAll("form")for (var i = 0; i &lt; forms.length; i++) {forms[i].addEventListener("submit", function (e) {console.log(this);if (!this.checkValidity()) {e.preventDefault...
form表单提交，用submit方法并且跳到指定页面或不跳转
热门推荐
github_38696818的博客
07-08 6万+
开发环境后台Java 后台根据提交的整个表单，通过name名对应的value值； 项目申请表 负责人姓名* 性别   女       男 联系邮箱*
如何实现隐藏一个html页面_「前端开发」一些HTML中的小细节，实现一个近乎完美的页面...
weixin_39892019的博客
12-03 647
在学习和总结HTML的过程中，我发现了一些之前没有留意的内容，在这里和大家分享一下，不知道在您使用HTML的过程中是否发现过类似的情况呢？​1.有序列表的标记在HTML中，有一个有序列表标签，这个标签中可以使用 type 属性来设置标签的标记符号，支持阿拉伯数字、罗马数字、英文字母几种形式，一般情况下，我们的有序列表列表项不会超过十个，并不是很多，所以不论使用哪种形式的标记都不会出现麻烦，但是假设...
<input type="submit" name="Submit" value="提交" />添加网站跳转的两种方式小结
budaoweng0609的博客
01-30 1万+
两种方法：一种是 本身在一个form表单里面，添加action就可以，比如,像这样子，另外一种很少使用在submit属性的按钮上，不过不是不行，你可以添加一个onclick，比如window.location.href='index.html'” value="提交" /> 此种方法要注意意看清引号的问题别搞错了 例如： name: passwor
form提交 转为 ajax请求
weixin_44646763的博客
07-22 679
form提交 转为 ajax请求
form表单只提交数据而不进行页面跳转的解决方案
01-19
点击submit按钮或直接回车可以将数据提交到saveReport页面，但是提交后也会跳转到saveReport页面 如何做到 将数据提交到saveReport（form的action指向）页面，但是页面又不进行跳转，即保持当前页面不变呢？...
使用Ajax方法实现Form表单的提交及注意事项
01-19
在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，...
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
01-19
1.1 通过submit 按钮提交后 会根据form的属性action=“路径”来跳转到相应的路径，这时，给form添加一个 onsubmit =”return check()” 属性， check()使我们要写的验证函数，如下图： &lt;form action
如何让form 表单提交数据后，页面不跳转不刷新？（已解决）
数据库爆破专家的博客
05-24 3011
思路： 先把写好的iframe标签隐藏起来，给form绑定属性target为和iframe一模一样的值，当点击button进行提交后，就会提交到iframe框里面，这样就不会重新打开一个新页面且成功提交数据 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, .
form表单的两种提交方式，submit和button的用法
小熊Leo的专栏
12-05 8177
触发form表单的两种提交方式，submit和button的用法1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。 方法一：在jsp的前端页面的头部插入一个js方法：function checkUser(){ var result = document.getElemen
HTML页面跳转及表单详解
m0_67444136的博客
07-18 1万+
HTML页面跳转及表单详解
HTML表单详解
奶香刘沙包的博客
01-04 1210
表单详解 一、表单标签属性 表单标签：form 属性：action：当表单提交时，页面跳转的路径==》按钮为：submit 属性：method：表单提交方式( ​ get：默认。 ​ 1、提交的数据会在地址栏中显示【不安全】 ​ 2、速度快 ​ 3、数据大小有限制 ​ post ​ 1、数据不显现 ​ 2、速度相对慢一些 ​ 3、数据几乎无限制【可上传大文件】); name：用于数据传递时封装数据的名称 value：
Form表单只提交数据而不进行页面跳转的方法
u013594477的专栏
02-05 4万+
解决方案：将数据提交到saveReport（form的action指向）页面，但是页面又不进行跳转，即保持当前页面不变呢？利用jquery的ajaxSubmit函数以及form的onsubmit函数完成 一般的写法为： "saveReport.htm" method="post"> …… type="submit" value="保存报告"/> 点击submit按钮或直接回车可
Form表单提交数据不跳转
疯狂Run的博客
09-30 3万+
关于如何在form表单submit之前执行、执行之后不跳转。
Form 提交表单的时候 避免跳转页面，用js控制
学习笔记
04-03 2674
前言 当下的前端开发，在提交表单的很多时候，既需要能回车提交，又不想跳转页面，此时就需要用 js 控制。 需求：能回车提交数据，不跳转页面 例子： HTML &lt;form method="post" id="regForm" onsubmit="loginSubmit()"&gt; &lt;div class="input-group"&gt; &...
form表单提交后页面的跳转
u011079727的专栏
10-22 1万+
使用easyui的form表单登录后想跳转到主界面，发现老是不跳转(我用的是struts2的跳转机制),害我总以为是struts2出了问题， 后来发现easyui的form有回调机制。 解决方案： 在界面中使用js进行跳转。 function regUser(){  //通过form的submit方法提交  $('#user_login_loginForm').form('submit',{   
html输入数据后点击按钮建立数据库并显示
最新发布
09-21
### 回答1： 要建立数据库并显示，需要使用服务器端编程语言，如PHP或Python。这里简单介绍一下使用PHP的方法： 1. 创建HTML表单，包含输入数据和提交按钮。例如： ```html &lt;form method="post" action="create_db.php"&gt; &lt;label for="name"&gt;姓名：&lt;/label&gt; &lt;input type="text" id="name" name="name"&gt;&lt;br&gt; &lt;label for="age"&gt;年龄：&lt;/label&gt; &lt;input type="number" id="age" name="age"&gt;&lt;br&gt; &lt;input type="submit" value="提交"&gt; &lt;/form&gt; ``` 2. 创建服务器端PHP文件 create_db.php，用于处理提交的表单数据。例如： ```php &lt;?php // 连接数据库 $servername = "localhost"; $username = "root"; $password = ""; $dbname = "myDB"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn-&gt;connect_error) { die("连接失败: " . $conn-&gt;connect_error); } // 获取表单数据 $name = $_POST["name"]; $age = $_POST["age"]; // 创建数据库表 $sql = "CREATE TABLE MyGuests ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, name VARCHAR(30) NOT NULL, age INT(3) NOT NULL )"; if ($conn-&gt;query($sql) === TRUE) { echo "表 MyGuests 创建成功"; } else { echo "错误: " . $sql . "&lt;br&gt;" . $conn-&gt;error; } // 插入数据 $sql = "INSERT INTO MyGuests (name, age) VALUES ('$name', $age)"; if ($conn-&gt;query($sql) === TRUE) { echo "数据插入成功"; } else { echo "错误: " . $sql . "&lt;br&gt;" . $conn-&gt;error; } // 显示数据 $sql = "SELECT * FROM MyGuests"; $result = $conn-&gt;query($sql); if ($result-&gt;num_rows &gt; 0) { while($row = $result-&gt;fetch_assoc()) { echo "id: " . $row["id"]. " - Name: " . $row["name"]. " - Age: " . $row["age"]. "&lt;br&gt;"; } } else { echo "0 结果"; } $conn-&gt;close(); ?&gt; ``` 3. 运行代码并测试。将HTML文件和PHP文件保存在服务器上，然后在浏览器中打开HTML文件，输入数据并提交。PHP文件将创建名为“myDB”的数据库，并在其中创建名为“MyGuests”的表格，然后将输入的数据插入表格中，并将数据显示在页面上。 ### 回答2： 要实现在HTML中输入数据后点击按钮，建立数据库并显示，需要借助后端开发语言和数据库。 首先，在HTML中添加输入框和按钮，并使用JavaScript获取用户输入的数据。例如： ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;建立数据库并显示&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="text" id="inputData" placeholder="输入数据"&gt; &lt;button onclick="saveData()"&gt;保存数据&lt;/button&gt; &lt;div id="outputData"&gt;&lt;/div&gt; &lt;script&gt; function saveData() { var inputData = document.getElementById("inputData").value; // 将数据发送至后端进行处理 } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; ``` 接下来，需要选择一种后端开发语言和数据库。例如，使用PHP作为后端开发语言，MySQL作为数据库。 在后端，需要接收前端发来的数据，并将其保存至数据库。例如，使用PHP连接数据库并保存数据： ```php &lt;?php $servername = "localhost"; $username = "用户名"; $password = "密码"; $dbname = "数据库名"; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接是否成功 if ($conn-&gt;connect_error) { die("连接失败: " . $conn-&gt;connect_error); } // 接收来自前端的数据 $inputData = $_POST['inputData']; // 将数据保存至数据库中的表格 $sql = "INSERT INTO 表格名 (字段名) VALUES ('$inputData')"; if ($conn-&gt;query($sql) === TRUE) { echo "数据保存成功"; } else { echo "数据保存失败: " . $conn-&gt;error; } $conn-&gt;close(); ?&gt; ``` 最后，在前端的JavaScript代码中，使用AJAX将用户输入的数据发送至后端进行处理，并将处理结果显示在页面上。 ```javascript function saveData() { var inputData = document.getElementById("inputData").value; // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 定义回调函数 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("outputData").innerHTML = xhr.responseText; } }; // 发送数据至后端进行处理 xhr.open("POST", "后端处理数据的PHP文件路径", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("inputData=" + inputData); } ``` 这样，当用户在输入框中输入数据后，点击按钮就能将数据保存至数据库，并将保存结果显示在页面上。 ### 回答3： 要实现在HTML页面中输入数据后点击按钮建立数据库并显示的功能，你需要结合使用HTML、JavaScript和后端数据库技术来完成。 首先，在HTML页面中创建一个表单，包含可以输入数据的文本框和一个提交按钮。例如： ```html &lt;form&gt; &lt;input type="text" id="inputData"&gt; &lt;button onclick="createDatabase()"&gt;建立数据库&lt;/button&gt; &lt;/form&gt; ``` 接下来，在JavaScript中定义一个函数`createDatabase()`来处理点击按钮的事件。在该函数中，你可以获取用户输入的数据，并将其存储到后端数据库中。具体来说，你可以使用AJAX技术来将数据发送到后端服务器，然后由服务器将数据存储到数据库中。以下是一个简单的示例： ```javascript function createDatabase() { var inputData = document.getElementById("inputData").value; // 使用AJAX将数据发送到后端服务器 var xhr = new XMLHttpRequest(); xhr.open("POST", "/saveData", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 数据存储成功后的处理逻辑 var response = JSON.parse(xhr.responseText); if (response.success) { // 显示成功消息或刷新数据列表等操作 console.log("数据存储成功！"); } else { // 显示失败消息或处理错误情况 console.log("数据存储失败：" + response.error); } } }; xhr.send(JSON.stringify({data: inputData})); } ``` 最后，在后端服务器上处理`POST /saveData`请求，并将数据存储到数据库中。这里假设你使用了Node.js和MongoDB作为后端技术栈。以下是一个简单的Express路由处理器的示例： ```javascript app.post("/saveData", (req, res) =&gt; { var inputData = req.body.data; // 将数据存储到数据库，这里假设使用了Mongoose库 YourModel.create({data: inputData}, (err, savedData) =&gt; { if (err) { res.json({success: false, error: err.message}); } else { res.json({success: true}); } }); }); ``` 通过上述步骤，你可以实现在HTML页面输入数据后点击按钮建立数据库并显示的功能。请注意根据实际情况适当进行修改和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值