`
tianyaguozhe
  • 浏览: 14296 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

jquery显示helloworld

    博客分类：
  • js
jquerywebservicexmlc# 
阅读更多 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>





    <script src="jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .hover
        {
            cursor: pointer; /*小手*/
            background: #ffc; /*背景*/
        }

        .button
        {
            width: 150px;
            float: left;
            text-align: center;
            margin: 10px;
            padding: 10px;
            border: 1px solid #888;
        }

        #dictionary
        {
            text-align: center;
            font-size: 18px;
            clear: both;
            border-top: 3px solid #888;
        }

        #loading
        {
            border: 1px #000 solid;
            background-color: #eee;
            padding: 20px;
            margin: 100px 0 0 200px;
            position: absolute;
            display: none;
        }

        #switcher
        {
        }
    </style>

    <script type="text/javascript">


        //无参数调用
        $(document).ready(function () {
            $('#btn1').click(function () {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
                    data: "{}",         //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到       
                    dataType: 'json',
                    success: function (result) {     //回调函数，result，返回值
                        $('#dictionary').append(result.d);
                    }
                });
            });
        });


        //有参数调用
        $(document).ready(function () {
            $("#btn2").click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "WebService.asmx/GetWish",
                    data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
                    dataType: 'json',
                    success: function (result) {
                        $('#dictionary').append(result.d);
                    }
                });
            });
        });


        //返回集合（引用自网络，很说明问题）
        $(document).ready(function () {
            $("#btn3").click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "WebService.asmx/GetArray",
                    data: "{i:10}",
                    dataType: 'json',
                    success: function (result) {
                        $(result.d).each(function () {
                            //alert(this);
                            $('#dictionary').append(this.toString() + " ");
                            //alert(result.d.join(" | "));
                        });
                    }
                });
            });
        });


        //返回复合类型
        $(document).ready(function () {
            $('#btn4').click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "WebService.asmx/GetClass",
                    data: "{}",
                    dataType: 'json',
                    success: function (result) {
                        $(result.d).each(function () {
                            //alert(this);
                            $('#dictionary').append(this['ID'] + " " + this['Value']);
                            //alert(result.d.join(" | "));
                        });

                    }
                });
            });
        });

        //返回DataSet(XML)
        $(document).ready(function () {
            $('#btn5').click(function () {
                $.ajax({
                    type: "POST",
                    url: "WebService.asmx/GetDataSet",
                    data: "{}",
                    dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
                    success: function (result) {
                        //演示一下捕获
                        try {
                            $(result).find("Table1").each(function () {
                                $('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());
                            });
                        }
                        catch (e) {
                            alert(e);
                            return;
                        }
                    },
                    error: function (result, status) { //如果没有上面的捕获出错会执行这里的回调函数
                        if (status == 'error') {
                            alert(status);
                        }
                    }
                });
            });
        });




        //Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调
        //但对与Ajax的监控，本身是全局性的
        $(document).ready(function () {
            $('#loading').ajaxStart(function () {
                $(this).show();
            }).ajaxStop(function () {
                $(this).hide();
            });
        });

        // 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
        $(document).ready(function () {
            $('div.button').hover(function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover');
            });
        });


    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div id="switcher">
            <h2>jQuery 的WebServices 调用</h2>
            <div class="button" id="btn1">
                HelloWorld
            </div>
            <div class="button" id="btn2">
                传入参数
            </div>
            <div class="button" id="btn3">
                返回集合
            </div>
            <div class="button" id="btn4">
                返回复合类型
            </div>
            <div class="button" id="btn5">
                返回DataSet(XML)
            </div>
        </div>
        <div id="loading">
            服务器处理中，请稍后。
        </div>
        <div id="dictionary">
        </div>

    </form>
</body>
</html>





/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
 [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService 
{

    public WebService () {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }


    /// </summary>
        /// <param name="value1"></param>
        /// <param name="value2"></param>
        /// <param name="value3"></param>
        /// <param name="value4"></param>
        /// <returns></returns>
        [WebMethod]
        public string GetWish(string value1, string value2, string value3, int value4)
        {
            return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
        }

        /// <summary>
        /// 返回集合
        /// </summary>
        /// <param name="i"></param>
        /// <returns></returns>
        [WebMethod]
        public List<int> GetArray(int i)
        {
            List<int> list = new List<int>();

            while (i >= 0)
            {
                list.Add(i--);
            }

            return list;
        }

        /// <summary>
        /// 返回一个复合类型
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public Class1 GetClass()
        {
            return new Class1 { ID = "1", Value = "牛年大吉" };
        }


        /// <summary>
        /// 返回XML
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public DataSet GetDataSet()
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", Type.GetType("System.String"));
            dt.Columns.Add("Value", Type.GetType("System.String"));
            DataRow dr = dt.NewRow();
            dr["ID"] = "1";
            dr["Value"] = "新年快乐";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Value"] = "万事如意";
            dt.Rows.Add(dr);
            ds.Tables.Add(dt);
            return ds;
        }


    }
    //自定义的类，只有两个属性
    public class Class1
    {
        public string ID { get; set; }
        public string Value { get; set; }
    }
1
顶
2
踩
分享到：
| js显示用户所使用的浏览器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery的HelloWorld

    **jQuery的HelloWorld** jQuery，一个轻量级的JavaScript库，因其简洁的API和强大的功能而备受开发者喜爱。它的出现极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这篇博客将引导初学者了解...

    JQuery的HelloWorld1

    ”程序，即`JQuery的HelloWorld1`。 首先，我们看到HTML文件的结构，它包含`&lt;!DOCTYPE html&gt;`声明来指定文档类型，`&lt;html&gt;`元素作为整个文档的根节点，以及`&lt;head&gt;`和`&lt;body&gt;`部分。在`&lt;head&gt;`部分，我们有`&lt;meta&gt;`...

    Spring MVC 2.5 + JQuery HelloWorld Sample

    **Spring MVC 2.5与JQuery整合实现Ajax HelloWorld示例** 在Web开发中，Spring MVC作为Java领域广泛使用的MVC框架，提供了强大的控制层支持，而JQuery则是一款高效、简洁的JavaScript库，简化了前端DOM操作和AJAX...

    1. JQuery初体验--helloWorld

    JQuery初体验--helloWorld”主题将引导你入门JQuery，通过一个简单的“Hello World”示例来展示其基本用法。 在JavaScript中，操作DOM（Document Object Model）通常是繁琐的，而JQuery提供了一种简洁的API来处理...

    一个helloWorld的简单插件代码

    function helloWorld() { var element = document.getElementById('hello'); // 假设元素ID为'hello' if (element) { element.innerHTML = 'Hello, World!'; } } // 在页面加载完成后调用这个函数 window....

    Hello World

    - 创建一个HTML文件，例如`HTML_AJAX-HelloWorld.html`： ```html function sayHello() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr....

    nutz初使用之MVC HelloWorld (netbeans html,jquery版）

    我们将通过一个名为"HelloNutz1"的示例项目，学习如何在NetBeans IDE中集成HTML、jQuery来实现“Hello, World!”程序。 首先，让我们了解MVC模式的基本概念。MVC是一种设计模式，它将应用程序分为三个核心部分：...

    hello_helloworld_htmljavascript_javascript_

    标题中的"hello_helloworld_htmljavascript_javascript_"似乎是一种组合关键词的方式，它可能代表着一个初学者入门编程时常常遇到的“Hello, World!”程序，这里特别提到了HTML、JavaScript和CSS这三个关键技术。...

    学习Atlas的第一个源码之HelloWorld

    【标题】"学习Atlas的第一个源码之HelloWorld" 指的是一个教程或者示例项目，目的是引导初学者了解和使用Atlas框架。Atlas是微软在ASP.NET 2.0时代推出的一个JavaScript库，用于增强客户端的交互性和动态性，它是...

    jQuery学习笔记之Helloworld

    })`会在页面加载完成后弹出一个对话框显示"Hello World!"。 此外，jQuery提供了简化的语法，如`$(function(){})`是`$(document).ready(function(){})`的简写形式，同样会在DOM就绪时执行内部的函数。这种简洁的...

    jQueryMobile之Helloworld与页面切换的方法

    在本文中，我们将探讨如何使用 jQuery Mobile 实现“Hello, World”示例以及页面切换的基本方法。 首先，要开始使用 jQuery Mobile，你需要下载并引入相应的 CSS 和 JS 文件。在提供的描述中，推荐下载 jQuery ...

    jQuery中文入门指南.pdf

    现在，让我们添加一个简单的 alert 事件，显示"Hello world!"信息。 ``` $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); ``` 这个代码使用了 jQuery 库来选择所有的 ...

    dwr的helloworld入门例子

    当用户点击按钮时，通过DWR调用服务器上的`HelloWorld`方法，并将返回的“Hello, World”显示在文本区域中。 7. **部署和测试**： 将DWR库添加到Web应用的类路径中，将Java和HTML文件部署到服务器，然后在浏览器中...

    单页面内导航及内容切换helloworld.zip

    本项目"单页面内导航及内容切换helloworld.zip"就是这样一个例子，它展示了如何使用HTML、JavaScript（包括jQuery库）、以及CSS来实现在单一HTML页面中导航和内容的同步切换。 首先，我们来看HTML部分。`index....

    Ajax实现helloworld!实例,eclipse+struts+Ajax初学者必看

    这个“Ajax实现helloworld!实例”是针对初学者的一个项目，旨在帮助他们理解并掌握如何在Eclipse开发环境中，结合Struts框架来运用Ajax技术。下面我们将详细探讨这一主题。 首先，我们需要了解Ajax的基本概念。Ajax...

    jquery\jQuery基础教程.pdf

    &lt;/div&gt;" )`会创建一个新的`&lt;div&gt;`元素，包含文本“Hello World!”，并为其添加类名`myClass`。 - **`jQuery(elements)`**：将一个或多个DOM对象转换为jQuery对象，从而可以使用jQuery提供的方法对其进行操作。 - ...

    JQuery教程-从零开始学习jQuery

    ##### HelloWorld JQuery 为了让大家快速上手，这里将介绍一个简单的“Hello World”示例，演示如何使用JQuery。 1. **安装与配置**： - **下载JQuery库**：可以从官方网站下载最新版本的JQuery库。 - **引入...

    jquery Moblie入门—hello world的示例代码学习

    本教程将带你入门jQuery Mobile，通过一个简单的 "Hello World" 示例来演示如何设置和运行你的第一个移动应用页面。 首先，你需要获取jQuery Mobile所需的三个核心文件： 1. `jquery.mobile-1.2.0.min.css`：这是...

Magicbox
Global site tag (gtag.js) - Google Analytics