前端表单提交方式大全

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量2.5k 收藏 4
点赞数 1
文章标签： 前端 form表单提交

1.获取input数据封装成json格式提交。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add User</title>

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#button_submit").click(function(){
            var name = $("#userName").val();
            var pass = $("#password").val();
            

            var user = {userName:name,password:pass};//拼装成json格式
            
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/user/addUser4",
                data:user,
                success:function(data){
                    alert("成功");
                },
                error:function(e) {
                    alert("出错："+e);
                }
            });
        });
    });
</script>

</head>
<body>
    <form>
        <table>
            <tr>
                <td>账号</td>
                <td>
                    <input type="text" id="userName" name="userName">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" id="password" name="password">
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="button" id="button_submit" value="提交">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

2.序列化表单提交。

使用jQuery的serializeArray() 方法序列化表单元素

　　　　如果表单元素很多，手工拼装成json数据非常麻烦，可以使用jQuery提供的serializeArray()方法序列化表单元素，返回json数据结构数据。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add User</title>

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#button_submit").click(function(){
            
            //序列化表单元素，返回json数据
            var params = $("#userForm").serializeArray();
            
            //也可以把表单之外的元素按照name value的格式存进来
            //params.push({name:"hello",value:"man"});
            
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/user/addUser5",
                data:params,
                success:function(data){
                    alert("成功");
                },
                error:function(e) {
                    alert("出错："+e);
                }
            });
        });
    });
</script>

</head>
<body>
    <form id="userForm">
        <table>
            <tr>
                <td>账号</td>
                <td>
                    <input type="text" id="userName" name="userName">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" id="password" name="password">
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="button" id="button_submit" value="提交">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

 

参考：https://www.cnblogs.com/luxh/archive/2013/03/14/2960152.html
           https://blog.csdn.net/kxj19980524/article/details/84388467

石金豆
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
php提交form表单提交方式,php form表单的提交
weixin_42114580的博客
04-01 5835
PHP表单之在Web页面中插入表单在普通的WEB页面中插入表单是如下的：这里将创建一个比较完整的表单,将中的元素和属性全部基本全部都展示出来。charset="UTF-8"title>indextablewidth="400"border="1"cellpaddingbgcolor="#999">trbgcolor="#ffcc33">td="103"height="25"ali...
Java 中 Form表单数据的两种提交方式
09-01
用户填写表单并提交后，浏览器将以POST方式向指定URL发送数据。 总结来说，GET和POST是HTTP协议中处理表单数据的两种主要方式。GET适合用于获取少量、非敏感的数据，而POST则适用于处理大量或需要保密的数据。在...
前端form表单提交的方式
百木成林
10-29 4296
1.无刷新页面提交表单 表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称， form提交目标位当前页面iframe则不会刷新页面 2.通过type=submit提交 一般表单提交通过type=submit实现，input type=“submit”,浏览器显示为button按钮，通过点击这个按钮...
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 1285
Vue在表单校验中trigger属性指定何时触发校验规则
前端页面表单提交到后台
weixin_35757191的博客
01-10 1214
前端页面表单提交到后台的步骤如下： 在前端页面中创建一个表单，指定 action 属性和 method 属性，分别指定提交的地址和提交方式(POST 或 GET)。 在表单中添加输入控件，如文本输入框、下拉框等。 给表单添加提交按钮，并为其绑定点击事件。 在点击事件的处理函数中，调用表单的 submit 方法提交表单。 在后台服务器上接收表单提交的数据，并进行相应的处理。 这里假设前...
【前端基础】表单标签/提交
风口IT猪的成长录
11-29 1862
【前端基础】表单标签/提交表单标签1. 表单的介绍2. 表单相关标签的使用3. 小结表单提交1. 表单属性设置2. 表单元素属性设置3. 示例代码小结 表单标签 学习目标 能够知道表单中常用的表单元素标签 1. 表单的介绍 表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。 2. 表单相关标签的使用 <form>标签 表示表单标签，定义整体的表单区域 <label>标签 表示表单元素的文字标注标签，定义文字标注 <i
常见的Form表单提交方式
时间静止
08-11 2182
Form表单提交方式探究 在进行项目编程的时候,我们难免会去编写一些简单的前端页面. 而编写前端页面就力不开 form表单的支持. 下面就form表单的提交方式进行如下探寻 1、常规写法 在form表单中添加一个 input标签，类型为submit <h1>商品列表</h1><hr> <form action="/goods/selGoo...
前端基础 至 form表单提交方式
yuezhilangniao的博客
01-31 2839
原文：https://www.jianshu.com/p/8c947e7fee00 虽然前后端不分离项目越来越少了（vue等太香）但是有时候后端程序员 想自己搞不分离web页面的时候还是会用原生html标签，复习一下form表单的提交，一共四种： 1 actice <form action='http://www.123.com/postValue' method='post'> <input type='text' name='username'/> <i
一般前端登录表单提交校验方法
weixin_43857786的博客
06-24 2924
一般前端登录表单提交校验方法 html <form action="" method="post"> <div class="inputItem flex"> <p>手机号码：</p> <input type="tel" placeholder="请输入手机号码" id="userPhone" name...
前端表单提交HTTP请求头编码类型相关知识
qq_39852145的博客
11-02 1344
表单提交要设置Content-Type，分为两种类型application/x-www-form-urlencoded和multipart/form-data 1.application/x-www-form-urlencoded 其中application/x-www-form-urlencoded用来提交字符串类型数据，参数的格式为key=value&key=value。 2.multipart/form-data multipart/form-data提交二进制数据。 注意：上传文件也要指
form表单的提交方式
zzzzzzzhu的博客
09-30 2820
form表单提交方式总结一下： 一、利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。 用户帐号 登录密码 1234567891011121314151617181920 二、利用...
使用layui前端框架弹出form表单以及提交的示例
10-16
总结，layui通过其强大的组件和简单易用的API，为我们提供了一种优雅的方式来创建弹出form表单和处理表单提交。在实际开发中，你可以根据需求自定义表单样式、验证规则以及交互逻辑，以满足项目的各种需求。同时，...
网页表单信息提交.html
08-04
HTML表单信息提交
jQuery基于Ajax方式提交表单功能示例
10-20
首先，要实现jQuery的Ajax表单提交，我们需要在页面中引入jQuery库以及可能用到的jQuery Form插件。jQuery Form插件简化了处理表单提交的过程，尤其是当表单包含文件上传时。在本例中，我们引入了`jQuery.form.js`。...
前端页面表单提交到google sheet的代码实现
02-15
1.实现了前端页面提交表单到Google Sheet收集数据的功能 2.资源内容:前端页面源码,手把手设置Google Sheet 的app script脚本过程 ,app script的源码 3.应用场景:用户页面提交表单到Google Sheet收集数据的功能
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 417
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 198
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 274
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
html注册前端表单提交
01-10
而这些信息是通过前端表单来收集的。 在HTML中，创建一个注册的前端表单非常简单。首先，我们需要使用```<form>```标签来创建一个表单，然后在表单中使用```<input>```标签来添加不同的输入框，比如文本框、密码框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值