zoukankan      html  css  js  c++  java
  • AjAx 页面传值 从入门到精通(含javascript ,AjAx,Json)(好) 自作演示版 第二节

    第一种方法(javascript),第二种方法(Jquery) 共用html页面和GetDate.ashx页面,这两种方法传递的是单字符串;第三种方法利用json传递数组(键值对,是字典数组)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <!---------------------------方法一-------------------->
       <!-- //javascript方法实现ajax传值
        <script type="text/javascript">
            function btnClick() {
                var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                if (!xmlhttp) {
                    alert("创建xmlhttp对象异常");
                    return false;
                }
                //准备向服务器的GetDate.ashx页面发出post请求,并传递参数id,&ts=new date().getdate()为预防页面有缓存
                xmlhttp.open("POST", "GetDate.ashx?id=" + encodeURI("历史") + " &ts=" + new Date().getTime(), false);
                //xmlhttp默认(也推荐)不是同步请求的,也就是open方法并不像webclient的dropdowmstring那样把服务器返回数据拿到哦才返回
                //,是异步的,因此需要监听Onreadystatechange事件
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readystate == 4) { //服务器请求完成
                        if (xmlhttp.status == 200) { //如果状态吗是200,则请求成功
                            document.getElementById("Text1").value = xmlhttp.responseText;
                            //responseText属性为服务器返回的文本
                        }
                        else {
                            alert("AJAX服务器返回错误!");
                        }
                    }
                }
                xmlhttp.send();//这时候才开始发送请求
            }
        </script>-->


         <!---------------------------方法二-------------------->
      <!--  //用Jquery实现AjAx 比较方便
        <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.js"></script>
        <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
         <script type="text/javascript">
             function btnClick() {//推荐用post方式,因为post方式没有缓存的问题
                 $.post("GetDate.ashx", { "id": "中国" }, function (data, status) {
                     if (status == "success") { // 第二个参数status为服务器返回状态码,success表示返回成功
                         $("#Text1").val(data); // 第一个参数data为服务器返回的内容
                     }
                     else {  //如果返回失败
                         alert("AJAX错误");
                     }
                 })
             }
                </script>-->
         

              <!---------------------------方法三-------------------->
            <!--  上边方法回传的数据都是单字符串,可用Json实现传递数组-->

        
    </head>
    <body>
    获取服务器时间:<br />
    <input id="Text1" type="text" style="400px;" />
    <input id="Button1" type="button" value="获取" onclick="btnClick()" />
    </body>
    </html>


         

    GetDate.ashx页面 方法一,方法二公用的页面:

    <%@ WebHandler Language="C#" class="GetDate" %>

    using System;
    using System.Web;

    public class GetDate : IHttpHandler {
       
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string id = context.Request["id"];
            context.Response.Write(DateTime.Now.ToString()+id);
            //获取服务器时间,通过context.response.write()返回数据
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }

    }

    方法三:Json 用于传递数组

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
           <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.js"></script>
        <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
        
           <!---------------------------方法三-------------------->
            <!--  上边(方法一,方法二)方法回传的数据都是单字符串,可用Json实现传递数组-->
            <script type="text/javascript">
                $(function () {
                    $.post("JsonTest.ashx", function (data, status) {
                        var person = $.parseJSON(data);
                        alert(person.Name+","+person.Age.toString());
                        
                    });
                });
            </script>

    </head>
    <body>

    </body>
    </html>

    JsonTest.ashx页面

    <%@ WebHandler Language="C#" class="JsonTest" %>

    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.Script.Serialization;


    [WebService(Namespace="http://tempuri.org")]
    [WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
    public class JsonTest : IHttpHandler {
       
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "text/plain";
            JavaScriptSerializer jss = new JavaScriptSerializer();//javascriptSerializer为启用AFAX的应用程序提供序列化和反序列化功能。
            string json = jss.Serialize(new Person { Name="tom",Age=30});//Serialize();挡在派生类中重写时候,生成名称/值对的字典数组。
            context.Response.Write(json);//返回一个字典数组形式的字符串{"Name":"tom","Age":30}
        }
     
        public bool IsReusable {
            get {
                return false;
            }
        }

    }
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

  • 相关阅读:
    selenium测试(Java)-- 键盘事件(七)
    selenium测试(Java)--鼠标事件(六)
    selenium测试(Java)--元素操作(五)
    selenium测试(Java)--浏览器控制(四)
    selenium测试(Java)(三)
    selenium定位方法(java实例)(二)
    selenium测试环境搭建(一)
    HTML5前端(移动端网站)性能优化指南
    dede使用方法----如何调用最新文章,最热文章,友情链接
    dede使用方法---如何调用指定栏目
  • 原文地址:https://www.cnblogs.com/TNSSTAR/p/2393795.html
Copyright © 2011-2022 走看看