Jquery调用webservices（各种返回值)

最新推荐文章于 2020-11-28 17:03:00 发布

thebesttome

最新推荐文章于 2020-11-28 17:03:00 发布

阅读量2.8k

点赞数

分类专栏： AJAX Jquery/javascript 文章标签： jquery webservice function json button string

本文链接：https://blog.csdn.net/thebesttome/article/details/6921407

版权

Jquery/javascript 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

AJAX

4 篇文章 0 订阅

订阅专栏

通过jquery调用webservices。相比jquery调用ashx

个人认为有以下好处

在webservices中调用直接通过 url/方法名地址可以直接调用

而在ashx中需要传入参数判定调用哪个方法。

代码示例

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Jquery_webservices.WebForm1" %>

<!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 runat="server">
    <title></title>
    <script src="script/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {           //不带参数
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/HelloWorld",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",

                    success: function (json) { alert(json.d); },
                    error: function (error) {
                        alert("调用出错" + error.responseText);
                    }

});
});

            $("#btn2").click(function () {           //带参数
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ReturnString",
                    data: "{s:'" + $("#txt").val() + "'}",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",

                    success: function (json) { alert(json.d); },
                    error: function (error) {
                        alert("调用出错" + error.responseText);
                    }

});
});

            $("#btn3").click(function () {           //对象
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ReturnDomain",
                    data: "{}",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",

                    success: function (json) { alert(json.d.Name + json.d.Age); },
                    error: function (error) {
                        alert("调用出错" + error.responseText);
                    }

});
});

            $("#btn4").click(function () {           //对象集合
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ReturnList",
                    data: "{}",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",

                    success: function (json) {
                        $.each(json.d, function (key, value) {
                            alert(value.Name + value.Age);
                        });
                    },
                    error: function (error) {
                        alert("调用出错" + error.responseText);
                    }

});
});

            //返回DataTable(XML)

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

});

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p><input type="button" id="btn1" value="不带参" /> </p>
    <p><input type="button" id="btn2" value="带参"/> <input type="text" id="txt" /></p>

后台：

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

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

            }
        }
        /// <summary>
        /// 返回字符串
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        /// <summary>
        /// 带参数
        /// </summary>
        /// <param name="s"></param>
        /// <returns></returns>
        [WebMethod]
        public string ReturnString(string s)
        {
            return s;
        }

        /// <summary>
        /// 返回集合对象
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public List<User> ReturnList()
        {
            return new List<User> {
                                   new User{Name="王斌",Age=23},
                                   new User{Name="李攀",Age=11}
            };
        }

        /// <summary>
        /// 返回对象
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public User ReturnDomain()
        {
            return new User { Name="王斌",Age=11};
        }

        /// <summary>
        /// 返回XML
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public System.Data.DataTable ReturnXML()
        {
            System.Data.DataTable dt = new System.Data.DataTable();
            dt.Columns.Add("Name");
            dt.Columns.Add("Age",typeof(int));
            DataRow dr = dt.NewRow();
            dr[0] = "wangbin";
            dr[1] = 11;
            dt.Rows.Add(dr);
            DataRow dr1 = dt.NewRow();
            dr1[0] = "lipan";
            dr1[1] = 22;
            dt.Rows.Add(dr1);
            dt.TableName = "xmltest";
            return dt;
        }

}

thebesttome

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery调用webservices（各种返回值)

通过jquery调用webservices。相比jquery调用ashx个人认为有以下好处在webservices中调用直接通过 url/方法名地址可以直接调用而在ashx中需要传入参数判定调用哪个方法。代码示例前台:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.
复制链接

扫一扫

专栏目录