ca88编程Form 表单提交知识的总计(全)

作者:ca88编程

前言: html 中的form成分被叫作表单,form成分中的内容,饱含有相互作用调控元器件,其指标是用来向web 服务器交由音信,达成内外端的人机联作指标。相关底子内容参照form根基知识文书档案,作品将会运行三个node 后台服务器,对前边八个form 表单的种种现象以致后端对要求结果的响应做多个总结总括

至于上传文件 非ajax提交 获得后台数据难点,ajax后台

<form name="configForm" id="configForm" method="post" action="" >

  ..........

</form>

依靠id拿到表单数据然后发送ajax要求,获得后台重返数据,管理数据,完美。

可是只要要求上传文件,

<tr>
  <td class="fontSize">请采取文件:</td>
  <td><input type="" class="easyui-filebox" id="fileImport" name="file" value="" style="width:300px;"></td>
</tr>

这几个文件数量后台得不到,表单数据这一个file也是null,那时候急需

<form name="configForm" id="configForm" method="post" action=""  enctype="multipart/form-data" >

增加的这些enctype="mutipart/form-data" 后台能够

@RequestMapping("/saveAppVersion")
@ResponseBody
public ModelMap saveAppVersion(String action, TbdAppVersion tbdAppVersion,
      @RequestParam(value = "file") MultipartFile file) {....

}

接收。

可是一定要表单提交诉求数据,ajax依然非常(具体原因可以百度。。)

<form name="configForm" id="configForm" method="post" action="/admin/systemConfig/saveAppVersion.do" enctype="multipart/form-data">

......

</form>

easyui里面的js  submit提交

handler : function() {
  $("#configForm").submit();
}

 

那就是说难题来了,提交今后怎样得到后台再次来到数据吧?

<form name="configForm" id="configForm" method="post" action="/admin/systemConfig/saveAppVersion.do"

      enctype="multipart/form-data" target="myIframe"> 。。。。。 </form>

<iframe name="myIframe" id="if_json" style="display:none">
</iframe>

在表单里增多三个target,也正是说提交成功重返的数据写在了name为myIframe的那几个iframe中,只刷新那么些iframe,接下去正是拿到这一个数量了,

固然如此百度不是什么好鸟,不过某些东西照旧得以找到的,比方以下获取iframe数据的点子!

handler : function() {

  $("#configForm").submit();
  $("#if_json"卡塔尔.load(function(State of Qatar{//获取iframe中的内容
  var body = $(window.frames['myIframe'].document.body);
  var data = eval('(' body[0].textContent ')');
    if(data.resultCode && data.resultCode != 0){
                .........
    }else{

         .........

        }
  });

}

 

非ajax提交 拿到后台数据难点,ajax后台 form name="configForm" id="configForm" method="post" action="" .......... /form 依照id得到表单数据然后...

我们通过express 来运行后台服务,並且模拟七个后台接口

const express = require('express')const app = express()const bodyParser = require('body-parser')// 处理请求 的content-type 为application/jsonapp.use(bodyParser.json//处理请求的content-type 为application/x-www-form-urlencodedapp.use(bodyParser.urlencoded({ extended: false}))app.get('/user',  => { console.log(req.query) res.sendapp.post('/user',  => { console.log res.sendapp.listen => { console.log

form 表单通过method 的天性来显著提交给后台的呼吁方式,两者的骨干用法如下

<!-- form 表单post提交,默认会刷新到 action 页面 --> <form action="http://localhost:3008/user" method="POST" name="post提交"> <p>name: <input type="text" name="username"></p> <p>password: <input type="password" name="password"></p> <input type="submit" value="提交"> </form> <!-- form 表单get 提交, 默认刷新action 页面 --> <form action="http://localhost:3008/user" method="GET" name="get提交"> <p>name: <input type="text" name="username"></p> <p>password: <input type="password" name="password"></p> <input type="submit" value="提交"> </form>

以下几点须要非常注意

  1. form 的付出游为供给经过type=submit达成
  2. form 中的method 属性不点名时, form 默许的交给情势为 get乞求。
  3. form 表单的提交后会有暗中认可行为,会跳转刷新到action 的页面
  4. form 表单的付出格局,==必要头暗中认可的content-type 为 x-www-form-urlencoded==
  5. 当一个form 表单内部,全部的input 中独有一个 type='text' 的时候,enter 键会有暗中认可的交由行为。

本文由ca88发布,转载请注明来源

关键词: ca88网址 表单 ca88亚洲 知识 Form