• 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不熟悉,功能虽然实现,还有点心虚。

    欢迎高手指正。





      

  • 相关阅读:
    神代码
    初读《代码大全》
    单词频度统计
    AFO
    bzoj4816: [Sdoi2017]数字表格
    bzoj4006: [JLOI2015]管道连接
    bzoj4774: 修路
    bzoj3209: 花神的数论题
    bzoj4521: [Cqoi2016]手机号码
    COGS2314. [HZOI 2015] Persistable Editor
  • 原文地址:https://www.cnblogs.com/zhuyuchen/p/2387933.html
Copyright © 2020-2023  润新知