<form> 标签 // HTML 表单 // from 表单转换成json 格式

<form> 标签   // HTML 表单    // from 表单转换成json 格式

form 表单，对开发人员来说是在熟悉不过的了，它是页面与web服务器交互时的重要信息来源

表单能够包含input 元素，比如字段，复选框，单选框，提交按钮 等等。用来向服务器传输数据。

form 是块级元素

 

简单的form 表单

示例：

 1 <!doctype html>
 2 <html>
 3   <head>
 5     <title>简单form 表单</title>
 6   </head>
 7   
 8 <!-- 简单的form 表单 -->
 9   <body>
10         <form action="js.html" method="post">
11             <p>账号：<input type="test" value="DemoName" /></p>
12             <p>密码：<input type="password" value="DemoPassword" /></p>
13             <input type="submit" value="提交" />
14         </form>
15   </body>
16 </html>

 

from 常用属性

　　1、name　　属性：规定表单的名称

　　2、action　　属性：规定表单提交的路径

　　3、method　 属性：设置表单的提交方式

　　　　　　属性值：GET　　:默认值，get请求没有消息体，请求参数都放在url 路径后面，以？隔开，多个参数以 & 相连

　　　　　　　　　　　　　　 有大小限制，即提交的数据量要小于1024字节

　　　　　　　　　　POST　 :对请求参数信息进行了隐藏，不会在地址栏显示，安全性较高，没有大小限制

　　4、target　　属性：规定在何处打开表单提交的url

　　　　　　属性值：_blank　　　　在新窗口/选项卡中打开

　　　　　　　　　　_self　　　　   在同一框架中打开

　　　　　　　　　　_parent　　　  在父框架中打开

　　　　　　　　　　_top　　　　　在整个窗口中打开

　　　　　　　　　　framename　　在指定的框架中打开

示例： framename 属性值

 1 <!doctype html>
 2 <html>
 3   <head>
 4     <meta>
 5     <title>framename 示例</title>
 6   </head>
 7   
 8   <body>
 9         <!-- 点击 提交Name1 会在 <iframe>标签中打开 -->
10         <form action="js.html" method="post" target="Name1">
11             <input type="submit" value="提交Name1" />
12         </form>
13         <iframe name="Name1"  id="iframeID1" src="" width="300px" height="80px" frameborder="1" >
14         </iframe>
15 
16         <!-- 点击提交Name2 会在新的窗口中打开，
17              因为指定的name 不存在，所以会在新的窗口中打开，若多次提交，则每次都会跳到这个窗口  -->
18         <form action="js.html" method="post" target="Name2"> 
19             <input type="submit" value="提交Name2" />
20         </form>
21         <iframe  id="iframeID2" src="" width="300px" height="80px" frameborder="1" >
22         </iframe>
23   </body>
24 </html>

 

将form 表单中的数据转换成json 格式数据

 1 <form id="searchForm">                    
 2  <table class="table-edit" width="80%" align="center">
 3    <tr>
 4     <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
 5         <script type="text/javascript">
 6             $(function(){                                                
 7                   $.fn.serializeJson=function(){  
 8                   　　// 定义一个json对象
 9                   　　var serializeObj={};
10                   　　// this 就是谁调用，就把谁转换为数组
11                   　　var array=this.serializeArray();
12                   　　//遍历数组，
13                   　　$(array).each(function(){
14                   　　　　 //判断是否有对应的名称                        
16                    　　　　if(serializeObj[this.name]){  
17                   　　　　 　　　　//判断这个名称是否有值，若有多个值，则多个值存到一个数组中                  
19                                 if($.isArray(serializeObj[this.name])){ 
20                         　　　　　　　　//若有值，则追加。              
22                                      serializeObj[this.name].push(this.value);  
23                         　　　　　}else{  
24                                                         
25                                      serializeObj[this.name]=[serializeObj[this.name],this.value];  
26                            　　　}  
27                  　　　　　}else{
28                      　　　　　　// 若无对应的名称 ,则创建名称。然后赋值                
30                                serializeObj[this.name]=this.value;   
31                      　　 }  
32                  　　});  
33                   　 return serializeObj;  
34              　　};
35 
36 
37              //给查询按钮（searchBtn） 添加点击事件                                     
38              $('#searchBtn').click(function(){
39             //1、将表单转换成json对象
40             var formData=$('#searchForm').serializeJson();
41 
42             //2、调用datagrid的load方法，将json对象通过分页请求，发送到后台                                             
43             $('#grid').datagrid('load',formData);
44             //3、关闭查询窗口                                
45             $('#searchWindow').window('close');
46                                             
47            });
48          });
49         </script>
50       </td>
51     </tr>
52   </table>
53 </form>

 

 

 

 

/

posted on 2018-12-07 10:46  大角牛  阅读(2459)  评论(0)  编辑  收藏  举报

导航