<form> 标签 // HTML 表单 // from 表单转换成json 格式
2024-10-19 07:32:53
<form> 标签 // HTML 表单 // from 表单转换成json 格式
form 表单,对开发人员来说是在熟悉不过的了,它是页面与web服务器交互时的重要信息来源
表单能够包含input 元素,比如字段,复选框,单选框,提交按钮 等等。用来向服务器传输数据。
form 是块级元素
简单的form 表单
示例:
<!doctype html>
<html>
<head>
<title>简单form 表单</title>
</head> <!-- 简单的form 表单 -->
<body>
<form action="js.html" method="post">
<p>账号:<input type="test" value="DemoName" /></p>
<p>密码:<input type="password" value="DemoPassword" /></p>
<input type="submit" value="提交" />
</form>
</body>
</html>
from 常用属性
1、name 属性:规定表单的名称
2、action 属性:规定表单提交的路径
3、method 属性:设置表单的提交方式
属性值:GET :默认值,get请求没有消息体,请求参数都放在url 路径后面,以?隔开,多个参数以 & 相连
有大小限制,即提交的数据量要小于1024字节
POST :对请求参数信息进行了隐藏,不会在地址栏显示,安全性较高,没有大小限制
4、target 属性:规定在何处打开表单提交的url
属性值:_blank 在新窗口/选项卡中打开
_self 在同一框架中打开
_parent 在父框架中打开
_top 在整个窗口中打开
framename 在指定的框架中打开
示例: framename 属性值
<!doctype html>
<html>
<head>
<meta>
<title>framename 示例</title>
</head> <body>
<!-- 点击 提交Name1 会在 <iframe>标签中打开 -->
<form action="js.html" method="post" target="Name1">
<input type="submit" value="提交Name1" />
</form>
<iframe name="Name1" id="iframeID1" src="" width="300px" height="80px" frameborder="1" >
</iframe> <!-- 点击提交Name2 会在新的窗口中打开,
因为指定的name 不存在,所以会在新的窗口中打开,若多次提交,则每次都会跳到这个窗口 -->
<form action="js.html" method="post" target="Name2">
<input type="submit" value="提交Name2" />
</form>
<iframe id="iframeID2" src="" width="300px" height="80px" frameborder="1" >
</iframe>
</body>
</html>
将form 表单中的数据转换成json 格式数据
<form id="searchForm">
<table class="table-edit" width="80%" align="center">
<tr>
<td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
<script type="text/javascript">
$(function(){
$.fn.serializeJson=function(){
// 定义一个json对象
var serializeObj={};
// this 就是谁调用,就把谁转换为数组
var array=this.serializeArray();
//遍历数组,
$(array).each(function(){
//判断是否有对应的名称
if(serializeObj[this.name]){
//判断这个名称是否有值,若有多个值,则多个值存到一个数组中
if($.isArray(serializeObj[this.name])){
//若有值,则追加。
serializeObj[this.name].push(this.value);
}else{ serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
// 若无对应的名称 ,则创建名称。然后赋值
serializeObj[this.name]=this.value;
}
});
return serializeObj;
}; //给查询按钮(searchBtn) 添加点击事件
$('#searchBtn').click(function(){
//1、将表单转换成json对象
var formData=$('#searchForm').serializeJson(); //2、调用datagrid的load方法,将json对象通过分页请求,发送到后台
$('#grid').datagrid('load',formData);
//3、关闭查询窗口
$('#searchWindow').window('close'); });
});
</script>
</td>
</tr>
</table>
</form>
/
最新文章
- 使用div元素来包含内容
- GSM模块fibocom G510使用记录
- linux ssh更换默认的22端口
- jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
- 【mysql的编程专题】触发器
- mysql 建立表里某的个字段根据另一字段进行自增长
- asp.net 自动遍历实体类
- svn branching and merging
- Eclipse 打开js文件时出现 Could not open the editor...
- python实例编写(7)---测试报告与测试套件(多个py文件,1个py文件内多个用例)
- Django跨域请求之JSONP和CORS
- 【Linux学习七】软件安装
- href和src的区别
- js 事件阻止冒泡
- Answer My Questions
- wap2.0开发
- Visual Studio 2017 调试 windows server 2016 Docker Container
- hdu 1205 吃糖果【鸽巢原理】
- springdata----->;spring集成redis(一)
- ubuntu16.04(liunx) 离线安装 xgboost (anaconda3,anaconda2共存)