XMLHttpRequest的亲密接触(2.2)——表单提交

  刚刚尝试了一下“现成的”请求提交和响应——表单提交“submit”。在整个过程中不需要实例化出XMLHttpRequest对象,而是被表单form封装起来了。

  同样先上例子,再说其他的XX点之类的。同样以htm为客户页面,aspx为服务器页面。

实现功能:输入用户名+密码+性别;提交服务器;跳转至另一个页面显示结果。

客户提交请求的页面代码:

客户请求页面代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>第三个尝试</title>
5 </head>
6 <body>
7 <form method="get" action="ServerPage.aspx">
8 NAME:<input type="text" name="name" /><br />
9 PASSWORD:<input type="password" name="pwd" /><br />
10 GENDER:<select name="gender">
11 <option>MALE</option>
12 <option>FEMALE</option>
13 <option>others</option>
14 </select><br /><br />
15 <input type="submit" name="Submit" value="SUBMIT" />
16 <input type="reset" name="Resete" value="RESET" />
17 </form>
18 </body>
19 </html>

服务器捕获请求处理代码:

服务器处理请求代码
 1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7
8 namespace my3rdWebsite
9 {
10 public partial class ServerPage : System.Web.UI.Page
11 {
12 protected void Page_Load(object sender, EventArgs e)
13 {
14 Response.Clear();
15 string Sname = Request.QueryString["name"];
16 string Spwd = Request.QueryString["pwd"];
17 string Sgender = Request.QueryString["gender"];
18 Response.Redirect("HTMLPage1.htm?pa1=" + Sname + "&pa2=" + Spwd + "&pa3=" + Sgender);
19 }
20 }
21 }

跳转第三页面代码:

客户显示页面
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>结果页</title>
5 <script type="text/javascript">
6 window.onload = function getResult() {
7 var req = window.location.href;
8 //"HomePage.htm?pa1=" + Sname + "&pa2=" + Spwd + "&pa3=" + Sgender
9 var par1 = req.split('?');
10 var par11 = par1[1].split('&');
11 document.getElementById("result").innerHTML = par11[0] + " " + par11[1] + " " + par11[2];
12 }
13 </script>
14 </head>
15 <body>
16 <div id="result" style="background-color:Gray; border-style:groove; font-weight:bold; 300px; height:auto"></div>
17 </body>
18 </html>

tip1:带密码的表单一定用post方式提交,为了安全,get会在url请求中显示请求内容如:http://localhost:54285/HTMLPage1.htm?pa1=hxx&pa2=123&pa3=FEMALE
post提交尚未了解清楚,有待进一步学习,欢迎高手知道。

tip2:这里服务器端的“亮点”是Respons.Redirect的使用Response.Redirect("HTMLPage1.htm?pa1=" + Sname + "&pa2=" + Spwd + "&pa3=" + Sgender);相当于服务器通过URL像另一个页面发送请求。

tip3:JavaScript中的window.location.href获取当前页面URL,由于JS不熟悉,功能虽然实现,还有点心虚。

欢迎高手指正。





  

原文地址:https://www.cnblogs.com/zhuyuchen/p/2387933.html