html表单向本页面提交数据,从页面提交表单数据的步骤之(一)

从页面提交表单数据的方法之(一)

先说下开发中我使用的主要web利器:

Bootstrap

AdminLTE

Jquery

vue.js

underscore.js

简介

利用表单给服务器提交数据是网站最常见的操作之一，主要用到的http请求也就是Get和Post两种方法。这两种方法都可以用来向服务器提交数据。这里我们已【查询】或者【搜索】操作为例扒一扒常用的提交表单数据的方法。

方法一:原始方法

说是最原始的方法是因为是用纯粹的html来提交数据，不涉及到js等内容。

1.网页端

看个最简单的栗子:

.... ......

定义好了表单的输入框，利用

元素的method属性指示用get方法提交本表单的数据；用元素的type属性指示点击这个按钮来进行提交，value属性指示按钮button上的文本,自定义；用元素的name属性用于服务器端获取对应的参数，值自定义。

点击提交之后，html会自动在到服务器的url地址中加入你所填的数据作为参数，即自动完成url地址的拼接并用get方法向服务器请求数据。

url地址的形式：http://www.ip:port/xxxx?user=xxx&password=xxxx ，如果有多个参数就一直在url后边加&就OK。

2.服务器端

当然了，服务器端已经写好了用于处理这个get请求的class。首先用get_argument("name")来获取url地址中的各个参数，这里的name是元素的name属性对应的值，get_argument这个方法专门用来获取get请求的url地址中附带的参数。

然后用得到的参数准备好需要的数据在回传到前端的页面上并显示出来：再提一点，这种方式我们一般称为纯后端的渲染方式，准备数据等等工作都在服务器端完成，准备好之后直接丢过来给前端显示。

如果查询出来的结果比较多需要分页的话，那么分页所需要的参数也是这个时候都准备好了再丢给页面。

3.弊端

这里的弊端是我认为不太方便或者比较繁琐的地方，总结出来有2点：

(1)查询条件的回显

很明显如果我要查询或者搜索的话，我输入查询条件点击对应的按钮后，结果出来的同时我已经输入的查询条件也应该在的，这样我才能合理的进行下一次查询。但是由于直接用html原生表单提交数据的话每一次查询都会刷新整个页面，所以必须在html中对不同的输入做不同的处理才能达到查询条件回显的目的。

如图：查询条件有和日期类型，所有的类型和所有的输入框都要做回显处理，比较繁琐和伤人

(2)页面的刷新

上面已经提到，不管查询条件如何，只要你点了按钮，真个页面都会刷新。刷新带来的一点就是页面闪一下用于重新加载，如果此时网速恰好不给力就B了。一般结果比较多肯定是分页的，换页的时候带来的也是整个页面的刷新。不管是【上一页】还是【下一页】，必须刷新没商量。

当然了，这个并不是不可接受的，因人而异吧。

html表单向本页面提交数据,从页面提交表单数据的步骤之(一)相关推荐

java list数据的更新_新增页面提交数据 list页面没有更新数据
工作共遇到一个问题 ,新增页面提交数据 list页面没有更新数据,需要手动刷新数据才会提交展示出来.在页面试过很多刷新的方法都不是很好使,求大神解答.代码如下: add:的页面代码 rel=" ...
html页面ajax提交数据,ajax请求提交form表单
AJAX表单提交以及数据接收方式一手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务 ...
问题分析探讨 -- 大约有700W数据的表,把当天的10W数据select导入新表,整个原来的表就锁死...
Sun shine 16:15:55帅哥我有个手机表大约有700百数据,,每天新增大约五万,并且新也有update 大约10万然后我每晚把当天的数据select 导入一个新表中的时候 ...
mysql多表查询取出最后的数据_数据库多表查询，如何取A表中最后一个数据在B表中进行查找？...
A表中有id user_id B表中有id phone a.user_id = b.id 需求:现在要取a.user_id最新的一个数据然后在B表中查找phone,并给b.phone发送短信= =.. ...
问题分析探讨 --大约有700W数据的表,把当天的10W数据select导入新表,整个原来的表就锁死
Sun shine 16:15:55 帅哥我有个手机表大约有700百数据,,每天新增大约五万,并且新也有update 大约10万然后我每晚把当天的数据select 导入一个新表中的时 ...
为表增加字段与拷贝数据到另一个表
create database temp_DB go use temp_DB go --创建两个表 create table t1 ( sid nvarchar(50), sname nvarchar ...
mysql中怎么删除表中的一列数据_mysql如何删除表中一行数据？
mysql中使用DELETE语句删除表中一行数据,语句为"DELETE FROM 表名称 WHERE 列名称 = 值".删除所有行的语句为"DELETE FROM tab ...
mysql表如何删除一条数据_mysql如何删除表中一行数据？
mysql中使用DELETE语句删除表中一行数据,语句为"DELETE FROM 表名称 WHERE 列名称 = 值".删除所有行的语句为"DELETE FROM tab ...
Excel表格VLOOKUP函数的应用（如何把A表中的一列数据匹配到B表中）
在Excel表中,经常需要将一个表中数据匹配到另一张表中,这时候就需要用到VLOOKUP函数. 两列数据合并:=E2&F2,&符号,双击自动填充列数据. 举例(以单个查找条件为例,查 ...

html表单向本页面提交数据,从页面提交表单数据的步骤之(一)

html表单向本页面提交数据,从页面提交表单数据的步骤之(一)相关推荐

最新文章

热门文章