ajax调用服务函数

最新推荐文章于 2021-08-05 16:18:23 发布

yangtang_newton

最新推荐文章于 2021-08-05 16:18:23 发布

阅读量537

点赞数

分类专栏： .net 文章标签： ajax webservice service function javascript string

本文链接：https://blog.csdn.net/yangtang_newton/article/details/4959569

版权

.net 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

一、页面方式

Page Method 方式
       如果不想独立创建Web Service，而只是希望能够调用页面上的一些方法，那么可以采用Page Method的的方法。同样的我们添加一个页面PageMethodDemo.aspx，增加一些JavaScript和一个后台方法，注意这个方法必须是静态方法，代码如下：
<script type="text/javascript">
function PageMethodCall()
{
    var testString = "PageMethodCall";
    PageMethods.Test($get('txtName').value, OnSucceeded);
}
// 页面方法调用完成的回调函数.
function OnSucceeded(result)
{
// 显示调用结果
    var RsltElem = document.getElementById("Results");
    RsltElem.innerHTML = result;
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="True" runat="server">
// EnablePageMethods="True" 启用PageMethods模式
</asp:ScriptManager>
<div>
    <h2>Page Method</h2>
    <input ID="txtName" type="text" />
    <button id="Button1"
        οnclick="PageMethodCall();">调用Page Method</button>
</div>
<hr/>
<div>
    <span id="Results"></span>
</div>
</form>
代码页PageMethodDemo.aspx.cs
[System.Web.Services.WebMethod]
public static string Test(string name)
{
    return "Hello " + name + "!";
}

二、

Web Service方式
         首先为项目添加一个文件夹WebServices，来存放所有要用到的Web Servcie页面，然后在Web Services文件夹下面添加一个 Web Service命名为SimpleWebService.asmx，在后台增加一个SayHello方法，并指定WebMethod特性。完整的代码如下：
SimpleWebService.cs
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SimpleWebService : System.Web.Services.WebService
{
    public SimpleWebService()
    {
    }
    [WebMethod]
    public string SayHello(string s)
    {
        return "Hello " + s;
    }
}
        然后添加一个Web Form,这里取名ServiceMethodDemo.aspx,添加一些JavaScript函数调用Web Service,完整代码如下：
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ServiceMethodDemo.aspx.cs" Inherits="Demo6_ServiceMethodDemo" %>
<!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>Web Service脚本调用示例</title>
    <script type="text/javascript">
// 调用Web Service的JavaScript函数
    function EchoUserInput()
    {
        var echoElem = document.getElementById("EnteredValue");
        SimpleWebService.SayHello(echoElem.value,
            OnSucceeded);
    }
// 调用成功后的回调函数
    function OnSucceeded(result)
    {
        var RsltElem = document.getElementById("Results");
        RsltElem.innerHTML = result;
    }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager">
      <Services>
        <asp:ServiceReference path="~/WebServices/SimpleWebService.asmx" />
      </Services>
      </asp:ScriptManager>
      <div>
          <h2>Web Service脚本调用示例</h2>
            <p>请在下面文本框内输入名字，然后点击按钮.</p>
            <input id="EnteredValue" type="text" />
            <input id="EchoButton" type="button"
                value="Echo" οnclick="EchoUserInput()" />
      </div>
    </form>
    <hr/><span id="Results"></span>
</body>
</html>
       最后在浏览器中查看，可以看到我们期望的效果，在页面的文本框中输入你的名字，点击按钮，页面显示出Hello xxx!

三、转化DATATABLE类型

用JavaScriptConverter解决复杂对象由于循环引用的问题
使用DataTable这样的复杂类型时，可以使用JavaScriptConverter来解决
引用Microsoft.Web.Preview.dll程序集，web.config做如下设置
<jsonSerialization>
       <converters>
            <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview" />
            <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview" />
            <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview" />
            <add name="BoyConverter" type="Converter.BoyConverter, App_Code" />
        </converters>
</jsonSerialization>
WebService代码如下：
    [WebMethod]
    public DataTable GetDataTable()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("ID", typeof(int)));
        dt.Columns.Add(new DataColumn("Text", typeof(string)));
        Random random = new Random(DateTime.Now.Millisecond);
        for (int i = 0; i < 10; i++)
        {
            dt.Rows.Add(i, random.Next().ToString());
        }
        return dt;
    }
客户端可通过对象方式引用:
function getDataTable()
            {
                DataTableService.GetDataTable(onSucceeded, onFailed);
            }
            function onSucceeded(result)
            {
                // alert(result);
                var sb = new Sys.StringBuilder("<table border='1'>");
                sb.append("<tr><td>ID</td><td>Text</td></tr>");
                for (var i = 0; i < result.rows.length; i++)
                {
                    sb.append(
                        String.format(
                            "<tr><td>{0}</td><td>{1}</td></tr>",
result.rows[i]["ID"],
                            result.rows[i].Text));
                }
                sb.append("</table>");
                $get("result").innerHTML = sb.toString();
            }
            function onFailed(error)
            {
                alert(error.get_message());
            }