html表单与后台交互

2015-12-17  本文已影响3225人  fc4e54758f8d

html表单初略

最近html5火爆来袭,导致很多以前的开发者在不断的往这个方向过渡,我也是这些开发者中的一位,我本生是一位iOS开发者,那么我先用iOS的眼光来说说h5,我向往h5主要是几个方面,第一,应用的前景,第二,跨平台的理念(当然跨平台有很多技术,但是h5成本低),作为一个对技术向往的人,我觉得学习前景行业是必不可少的,下面我们来看看h5中第一种与后台交互的方式,表单(from);

前端(h5)

表单在h5这个方面比较简单,下面我接入我写的一点简短的代码

`<!-- action为空,那么就是将数据提交到本页面 -->`
`<form action="http://127.0.0.1/pangzi.php" method="get">`
  `<!-- 输入框。单行 -->
  <!-- <input type="text" name="username" value="">
  <input type="password" name="password" value="">
  <input type="submit" value="百度一下"> -->`


  <!-- 下拉菜单 -->
  <!-- <select  name="sex">
      <option value="0">男</option>
      <option value="1">女</option>
      <option value="2">其他</option>
  </select>
  <input type="submit" name="选项卡" value=""> -->

  <!-- 接口以两部分组成,为好前面其实是网址,服务器是一个提供服务的仓库,前面是域名或者ip,后面是
  文件路径,后面是健值对,健值对就是前端传给后台的数据; -->

  <!-- 单选框
  <input type="radio" name="radio" value="男">初中
  <input type="radio" name="radio" value="女">高中
  <input type="submit" name="" value=""> -->

  <!-- 复选框
  <input type="checkbox" name="box[]" value="男">男
  <input type="checkbox" name="box[]" value="女">女
  <input type="submit" name="baiduyixia" value=""> -->

  <!-- 多行文本
  <textarea name="liyan" rows="8" cols="40">我是默认的内容</textarea>
  上传文件:
  <input type="file" name="file" value=""> -->

  <!-- label 表单里面的响应传递 -->
  



  <input type="submit" name="baiduyixia" value="">


</form>`

多的我们也不做过多的解释,主要说说每个input标签有一个name属性,这个属性特别重要,像我这样作为iOS的开发者或者对于网络请求比较敏感,我们简单的说说get请求,url的划分http://www.baidu.com/index.php?name=sfdf&age=10,我们将其拆分,这部分是http://表示协议类型,www.baidu.com服务器域名,这部分也可以是ip地址,name=sfdf&age=10这部分可以是两个简直对,而我们表单里面的name就是key,value就是value,那么些一下就清晰多了。

当我们点击提交按钮的时候,我们及将数据上传到对应的文件里,后台假设使用php,那么php对应的文件根据对应的input标签里面的name可以获取到对应的value。

服务端(php)

php相对就比较简单了,我们只做简单的操作,我们主要是前端,下面我们一起来看看php接受消息的代码

<?php //根据对应的name获取到对应上传过来的value $value = $_GET["box"]; //通常我们在这里会做一些操作,我们做app一般是对数据库进行增删改查;获取到对应的信息返回(但是我们这里就不详细的去说了) //输出数据 echo json_encode($value); ?>

看到这里顿时对前端交互是不是有了一定的了解,感觉实在太简单,但是呢我想说事实是这种表单不会经常被使用到,我们在前端的网络请求中一般使用的是ajax,但是这个得等我看完javascript之后再给大家更新,谢谢大家的收看,我会不断更新自己认为有用的东西!

上一篇 下一篇

猜你喜欢

热点阅读