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了。一般结果比较多肯定是分页的，换页的时候带来的也是整个页面的刷新。不管是【上一页】还是【下一页】，必须刷新没商量。

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