2013-11-20 第二、三课

1、往table中添加控件

1）大部分都是以input开头代表输入域，比如创建一个textbox文本框：

<input type="text" name="name">

      这里的name是用于取输入的值用的，方法是：

var name = document.getElementsByName("name");

       当然也可以给控件添加id属性，用getElementById().value来取值

var name = document.getElementById("name").value.Trim();

※当控件为checkbox

<input type="radio" name="sex" value="男" checked="1">男
<input type="radio" name="sex" value="女">女

var sex=document.getElementsByName("sex");
sex[0].checked==true;//选择了男
sex[1].checked==true;//选择了女

控件取出的值是放在一个var[]变量中，因为是由多个空间组成的一个group。

※当控件为select

<select name="edu">
     <option value="1">大专</option>
     <option value="2">本科</option>
     <option value="3">研究生</option>
</select>

控件的值取出是被存放于var中的

2、往table中添加按钮

    <input type="submit" value="提交" οnclick="return check()">
    <input type="reset" value="重置">

可以看到提交按钮里面有一个onclick属性，是用来调用点击后触发的js函数 check()

js可以写一些自定义函数，比如对控件进行取值进行判断

<script type="text/javascript">
    function check(){
        var name=document.getElementsByName("name");
        if(name[0].value==""){
        alert("姓名不能为空");
        name[0].focus();
        return false
        }

        var sex=document.getElementsByName("sex");
        if(sex[0].checked)
        alert("你选择了男");
        else alert("你选择了女");

        var hobby=document.getElementsByName("hobby");
        var hobbys="";
        for(var h=0;h<hobby.length;h++){
            if( hobby[h].checked){
               hobbys+= hobby[h].value+",";
            }
        }
        hobbys=hobbys.substr(0,hobbys.length-1);
        alert(hobbys);

        var edu=document.getElementsByName("edu")[0];
        alert(edu.value);

        var img=document.getElementsByName("img")[0];
            /*var imgs="";
            for(var i=0;i<img.length;i++){
                imgs+=img[i].value;
            }*/

       alert(img.value);

       return true;
    }
    </script>

以上代码对tabel中几种上面提到过的控件进行的取值判断，可以慢慢看看体会其中用法。

3、对fileupload控件的取值与image控件的图片预览

定义一个fileupload控件选择所要上传的文件：

<input type="file" value="图片" width="50%" name="img" οnchange="Preview(this)">

在按钮属性中定义了一个onchange属性，当fileupload控件选择了文件后会发生变化，此时触发该函数Preview(this)。

定义一个image控件用于显示图片：

<input type="image" id="image" width="180px" height="240px">

这里设定了一个长宽为4:3，登记照差不多都是这种比例。

下面的这个函数用于实时在image控件中预览fileupload控件选择的图片：

function Preview(sender) {
    var path = window.URL.createObjectURL(sender.files[0]);
    document.getElementById("image").src = path;
    /*document.getElementById("image").style.display = "block";*/
}

若要获取图片的路径，需要用到fileupload的element属性

    var img=document.getElementsByName("fileupload")[0];

不过不会显示出真正的路径，因为这个路径是被封装过的，显示的是：  盘符:/fake/*.jpg

4、对于method的get与post的理解与运用

<form action="http://localhost:4892/Handler.ashx" method="get"><!--设置为post可以隐藏键值传送  -->

如果设置为get，你讲在网页的网址后面看取出的值，是该页面网址结尾处以?开头键值对形式用&拼接出的一段数据

在web页面中获取用以上方式传入的数据：

public partial class Person : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string test = Request.Params["test"] == null ? "" : Request.Params["test"].ToString();

            Response.Write(test);
        }
    }

以上代码可以获取传入的定义名为test的数据的值，并且在页面中显示出其中数据

也可以创建一个.ashx网页来接收：

在页面中加入以下代码

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string test = context.Request["name"] == null ? "" : context.Request["name"].ToString();
            string sex = context.Request["sex"] == null ? "" : context.Request["sex"].ToString();
            string pass = context.Request["pass"] == null ? "" : context.Request["pass"].ToString();
            string edu = context.Request["edu"] == null ? "" : context.Request["edu"].ToString();
            string hobby = context.Request["hobby"] == null ? "" : context.Request["hobby"].ToString();
            string[] hobbys = hobby.Split(',');
            string desc = context.Request["desc"] == null ? "" : context.Request["desc"].ToString();
            context.Response.Write(test + " " + sex + " " + pass + " " + edu + " " + hobby + " " + desc);
        }

虽然和前面的方法差不多，但是这里需要用context函数来调用Response与Request。