上海网站建设

上海网站建设

咨询热线:(021)51698180


HTML,CSS

上海网站建设RSS订阅  RSS订阅  新浪微博  新浪微博  上海网站建设客服  客服  获取报价  获取报价

XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据

在本 XHTML MP 教程前面的章节中, 我们已经提到了关于如何用选择列表和各种输入元素在 XHTML MP 中从用户那里获取数据. 然而, 如果用户数据如果不被提交到服务器作进一步的处理的话, 是没用用处的. 要在 XHTML MP 中向服务器发送数据, 你需要的是 <form></form> 标签和一个提交按纽. 让我们首先看一下下面这个 XHTML MP 例子. 然后再作详细讨论.
 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <h1>Registration Form</h1>
    <form method="get" action="processing.asp">
      <p>
        Username:<br/>
        <input name="username"/><br/>

        Password:<br/>
        <input type="password" name="password"/><br/>

        Gender:<br/>
        <input type="radio" name="gender" value="m"/>Male
        <input type="radio" name="gender" value="f"/>Female<br/>

        Country:<br/>
        <select name="country">
          <option value="ca">Canada</option>
          <option value="cn">China</option>
          <option value="fr">France</option>
          <option value="de">Germany</option>
          <option value="in">India</option>
          <option value="it">Italy</option>
          <option value="jp">Japan</option>
          <option value="kr">Korea</option>
          <option value="uk">United Kingdom</option>
          <option value="us">United States</option>
        </select><br/>

        Which part of our XHTML MP tutorial do you like?<br/>
        <input type="checkbox" name="tutorial_part" value="1"/>Part 1
        <input type="checkbox" name="tutorial_part" value="2"/>Part 2
        <input type="checkbox" name="tutorial_part" value="3"/>Part 3
        <input type="checkbox" name="tutorial_part" value="4"/>Part 4

        <input type="hidden" name="temp_id" value="123456"/>
      </p>

      <hr/>

      <p>
        <input type="submit"/>
        <input type="reset"/>
      </p>
    </form>
  </body>
</html>
 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据1

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据2

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据3

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据4

Sony Ericsson T610
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据5

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据6

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据7

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据8

Nokia Mobile Browser 4.0
 

XHTML MP 表单元素

 
<form>是 form 表单控件的容器. 注意到在之前的 XHTML MP 例子中, <input> 和 <select> 元素并没有被直接包含于 <form></form> 标签对中. 而是在标签之间间有一个块级元素 (block-level) <p>. 这对于遵守 XHTML MP 标准是必要的. 我们在这提及它是因为在 HTML 4.01 Transitional 中块级元素并非必需的.
 
<form ...>
  <p>
...
    <input ...>
...
    <select ...>
...
  </p>
</form>
 
<form> 标签里的 method 属性指明了 HTTP 数据传送该用哪种方法. POST 和 GET 两种 HTTP 方法是可用的. 如果要用 HTTP 的 POST 方法, 就给 method 属性赋 "post" 值, 否则的话, 给它赋 "get" 值.

如果用 HTTP POST 方法, 被传送的数据将会被放到请求的消息体 (message body) 里. 如果用 HTTP GET 方法, 被传送的数据将会附加到 URL 上. 因为 URL 能容纳的字符有限, 所以 GET 方法有一个缺点是只能发送有限的数据. 如果用户数据包含非 ASCII 码字符, 你应该用 POST 方法来避免编码问题.

<form> 标记中的 action 属性指定了要把数据发送到的 URL.

在前面的 XHTML MP 例子中,  下面这行代码会通知 WAP 浏览器, 当提交按钮被按下后, 用 HTTP 的 POST 方法把表单提交至 "processing.php":
 
<form method="post" action="processing.php">
 

XHTML MP 中的提交按纽

 
在 XHTML MP 中, 每个表单都应有一个提交按钮. 当提交按钮被按下后, 表单数据被发送到服务器. 如果你熟悉 WML, 你应该知道在 WML 里数据发送是通过超链接实现的. 而这在 XHTML MP 里是不可能的.

在 XHTML MP 中创建提交按钮用的是 <input>元素. type 属性应该被指定为 "submit", 像下面这样:
 
<input type="submit" />

提交按钮的缺省标题是 "Submit". value 属性可以用来更改按钮的标题. 下面的 XHTML MP 代码把按钮的标题改成了 "提交".
 
<input type="submit" value="提交" />
 

XHTML MP 中的重设按纽

 
当重设按钮被按下时, 包含这个重设按钮的表单会被还原成初始状态. 在 XHTML MP 的表单中, 重设按钮并非必需的组件.

和提交按纽一样, 创建重设按纽用的也是 <input> 元素, 重设按纽的类型 (type) 都是 "reset":
 
<input type="reset" />

重设按钮的缺省标题是 "Reset". 和提交按钮一样, 重设按钮的标题也是可以更改的. 用 value 属性就可以实现. 例如, 下面的 XHTML MP 标记创建了一个标题为 "清空" 的重设按纽.
 
<input type="reset" value="清空" />
 

服务器端

 
在服务器端, 用 <input> 和 <select> 指定的 name 属性可以检索到用户输入的数据. 你可以用你自己喜欢的服务器端技术实现你的 WAP 应用所需的处理. 常用的服务器端数据包括 PHP, Java Servlet, JSP, Perl, 和 ASP.

在前面的 XHTML MP 例子中, 表单数据被发送到 processing.php 页面. 那个页面中的 PHP 代码会对数据进行处理. 下面就是 processing.php 页面的 PHP 代码. 它只是把服务器端收到的表单数据显示出来了. 在实际的 WAP 应用中, 服务器很可能要做更复杂的处理. 比如, 把表单数据储存到诸如 MSQL, PostgreSQL, Microsoft SQL Server, Oracle 等等数据库中.
 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<% Response.ContentType = "application/vnd.wap.xhtml+xml" %>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p>
      Data received at the server:<br/>
      Username: <% =Request.QueryString("username") %><br/>
      Password: <% =Request.QueryString("password") %><br/>
      Gender: <% =Request.QueryString("gender") %><br/>
      Country: <% =Request.QueryString("country") %><br/>
      Which part of our XHTML MP tutorial do you like?
<%
    for i=1 to Request.QueryString("tutorial_part").Count
      Response.Write(Request.QueryString("tutorial_part")(i) & " ")
    next
%>
      <br/>
      temp_id: <% =Request.QueryString("temp_id") %>
    </p>
  </body>
</html>
 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据9

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据10

Sony Ericsson T610
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据11

 
XHTML MP教程(二十一):在 XHTML MP 中向服务器提交表单数据12

Nokia Mobile Browser 4.0
 
由花火网络整理 www.hahoo.cn 上海网站建设