form表单提交

1.使用Ajax实现异步操作，点击登录按钮后，即触发form表单的提交事件，数据传输至后端 JSP： <script type="text/javascript" src="resources/js/jquery.js"></script> <script type="text/javascript" src="resources/js/login.js"></script> <form id = "form"> <table align = "center"> <tr> <td>用户名</td><td><input type = "text" id = "userName" name = "userName"></td> </tr> <tr> <td>密码</td><td><input type = "password" id = "userPwd" name = "userPwd"></td> </tr> <tr> <td align = "left"><input id = "submitbtn" type = "submit" value = "登录" style = "background-color: Cyan;color:blue"></td> <td align = "right" ><button style = "background-color: Cyan

关于表单提交，做法有很多中，根据具体需求，做出不同的反应吧。LZ这里还是根据实际需求，写几个简单的案例。我们知道，对于表单提交，正常直接action中写url，点击submit按钮就可以提交了。 一：需求是：在订单列表表单页面，每条记录前都有一颗checkbox复选框，选中则记录id值，选中多个则九路多个id值。然后在表单之外有颗“导出订单”按钮，当点击该按钮的时候，提交选中的复选框的记录的id值到后台java代码。 　　下面有三张图片：第一张是form的写法，第二张是做表单提交ajax请求的，最后一张是将id值传到后台的部分java代码。 　　 　　================================================================================================== 　　================================================================================================== 　　 　　================================================================================================== 　　===============

PHP-表单提交 一 form表单 GET 将表单内容附加到URL地址后面，提交的信息长度有限制，不可以超过8192个字节，同时不具有保密性，而且只能传送ASCII字符（一般传送的不保密性数据） POST 将用户填写的数据包含在表单数据中，不会在地址栏中显示，同时没有数据长度的限制 默认GET方法，地址传值使用的GET方法 二 input 标记 type属性：text 文本域 password 密码域 reset 重置 radio 单选框 checkbox 复选框 hidden 隐藏域(传递页面重要数据) name 表单名称 action 目标地址，绝对或相对URL,默认为当前页面 enctype 表单编码方式 数据获取： <?php if ($_POST){ //不要使用isset判断，$_POST数据已经存在，会返回为真 print_r($_POST); } ?> （一）文本域和密码域 <form name="test" method="POST" action="" enctype="" > 用户名<input type="text" name="user"> 密码<input type="password" name="password"> <br/> <input type="submit" name="submit" value="提交"> </form> （二

使用场景：在一个表单中，各项数据提交后需要重置表单中各<input>元素的值为空。 组件中关联： <template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="排序号"> <el-input v-model="form.sort" placeholder="请输入排序号"></el-input> </el-form-item> <el-form-item label="编码"> <el-input v-model="form.categoryCode" placeholder="请输入种类编号/代码"></el-input> </el-form-item> <el-form-item label="名称"> <el-input v-model="form.categoryName" placeholder="请输入种类名称"></el-input> </el-form-item> <el-form-item label="禁用"> <input type="checkbox" v-model="form.status" />禁用 </el-form-item> <el-form-item label="备注"> <el-input type="textarea" v

LayUI  经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案.   其他UI框架：     Bootstrap，Element， EasyUI，LayUI 等等 LayUI使用  Layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。   1. 官网首页下载 https://www.layui.com/   2. 引入layui核心文件： layui/css/layui.css // layui中内置的样式 layui/layui.js // layui中核心的js插件(模块化使用) layui/layui.all.js // layui中所有的js   3. layui的目录介绍:    layui     ├─css //css目录     │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）     │ │ ├─laydate     │ │ ├─layer     │ │ └─layim     │ ├─layui.css //核心样式文件     │ └─layui.mobile.css //移动端CCSS样式     ├─font //字体图标目录（内置字体）     ├─images //图片资源目录

作者：陈大鱼头 github：KRISACHAN <input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。 本篇文章默认大家已经知道 <input /> 标签的基本用法，不会做过多的基础说明~ 没想到，这些选择器居然跟 input … 到写文章为止，根据最新的 drafts 指出，一共有3大类，16种跟 input 相关的选择。其实都挺有用的，善用它们，会让我们的用户体验更加美好。 下面我们来分享一下这3大类选择器的作用： 第一类：控制系（Input Control States） 选择器 作用 :enabled 选择可使用状态的 <input /> 元素 :disabled 选择不可使用状态的 <input /> 元素 :read-only 选择不可编辑状态的元素（不仅仅是 <input /> ） :read-write 选择可编辑状态的元素（不仅仅是 <input /> ） :placeholder-shown 选择 placeholder text 显示时的元素 :default 选择在 <button> ， <input type="checkbox" /> ， <input type="radio"

系列 1. ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ] 2. ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ] 3. ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ] 4. ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ] 正文 一、截图和示例共用Ext.FormPanel 1.1 截图 由于本文主要关注的是表单提交的几种方式，所以仅用了一个表单项以便于测试和减少示例代码。 1.2 示例共用Ext.FormPanel < script type = " text/javascript " > Ext.onReady( function () { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = ' side ' ; var form1 = new Ext.FormPanel({ frame: true , renderTo: Ext.getBody(), title: ' <center>表单提交</center> ' , style: ' margin-left:auto;margin-right:auto;width:500px;margin-top:8px; ' , labelAlign: ' right ' ,

浏览器上传图片到服务端，我用过两种方法： 1.本地图片转换成base64，然后通过普通的post请求发送到服务端。 　　操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交。 　　form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。但是如果想传输多条form表单数据，需要写很多dom，同时还要写iframe，太麻烦。 目前感觉比较干净的办法就是 通过axios的post请求，发送form数据到后台。 html部分，至于界面优化，可以把input file的opacity设置为0，点击其父容器，即触发file <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> axios的post请求，发送form数据部分，这样就可以无刷新的提交form数据到后台 update(e){ let file = e.target.files[0]; let param = new FormData(); //创建form对象 param.append('file',file,file.name);//通过append向form对象添加数据 param.append(

html部分，可以把input file的opacity设置为0，点击其父容器，即触发file <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update($event)"/> axios的post请求，发送form数据部分，这样就可以无刷新的提交form数据到后台 　　　　　　　update(e){ let file = e.target.files[0]; let param = new FormData(); //创建form对象 param.append('tweetPic',file,file.name);//通过append向form对象添加数据 //param.append('chunk','0');//添加form表单中其他数据 //console.log(param.get('tweetPic')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去 let config = { headers:{'Content-Type':'multipart/form-data'} }; //添加请求头 axios.post('url/',param,config) .then(response=>{

一.CSRF是什么？ 　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。 二.CSRF可以做什么？ 　　你这可以这么理解CSRF攻击： 攻击者盗用了你的身份，以你的名义发送恶意请求 。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。 三.CSRF漏洞现状 　　CSRF这种攻击方式在2000年已经被国外的安全人员提出，但在国内，直到06年才开始被关注，08年，国内外的多个大型社区和交互网站分别爆出CSRF漏洞，如：NYTimes.com（纽约时报）、Metafilter（一个大型的BLOG网站），YouTube和百度HI......而现在，互联网上的许多站点仍对此毫无防备，以至于安全业界称CSRF为“沉睡的巨人”。 四.CSRF的原理 　　下图简单阐述了CSRF攻击的思想： 　　 　　从上图可以看出，要完成一次CSRF攻击， 受害者必须依次完成两个步骤 ： 　　1. 登录受信任网站A，并在本地生成Cookie 。 　　2. 在不登出A的情况下，访问危险网站B 。 　　看到这里，你也许会说：“ 如果我不满足以上两个条件中的一个