使用JS调用WebService

来源：互联网发布：java 解析方法签名编辑：程序博客网时间：2024/05/18 00:52

功夫不负有心人,是的,今天下午差不多忙了一整个下午的时间来完成在客户端调用WebService的实现,经过一次次的调试和修改,终于在晚上的19:15分以完全让本人喜悦的心情完成了这个功能实现目标.在这里给想实现这方面功能而又苦于未能实现的朋友一个实例参考,接下来我们将一一个客户端内容提交到数据库为实例展开介绍:

首先,我们来建一个Web页面,详情如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CooperateItem.aspx.cs" Inherits="CooperateItem_CooperateItem" %>

<!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>

//下面这个JS文件是后面要讲到的客户端程序
<script type="text/javascript" language="javascript" src="ItemBuy.js"></script>
</head>
<body>

//在这里我使用的是利用ASP.NET AJAX的ScriptManager 来完成其中较为重要的一步的,如果你熟悉ASP.NET AJAX控件的话一看就知道了,如果不是很熟悉的话,也可参考本站里关于ASP.NET AJAX控件的详细介绍;

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>

        //Path:则是我们要在后面讲到的创建的WebService的路径;
        <asp:ServiceReference Path="../WebService/TigetherService.asmx" />
    </Services>
    </asp:ScriptManager>

//下面是一个比较简单的表单页面

<table border="0" cellpadding="0" cellspacing="0" style="width: 524px; height: 400px; margin-top:10px;">
                   <tr>
                       <td colspan="2" style="text-align:left;">
                           <span style="font-size:12px; margin-left:370px;">带<span style="color: #ff0066">※</span>字符为必填项;</span></td>
                   </tr>
                   <tr>
                       <td style="width: 139px; text-align:right;">
                           <span style="color: #ff0066">※</span>申请机构(公司/个人)：</td>
                       <td style="width: 100px">
                           <input id="txt_hedai" type="text" style="width: 334px" />
                       </td>
                   </tr>
                   <tr>
                       <td style="width: 139px; text-align:right; height: 22px;">
                           <span style="color: #ff0066">※</span>项目名称：</td>
                       <td style="width: 100px; height: 22px;">
                           <input id="txt_hename" type="text" style="width: 334px" />
                      </td>
                   </tr>
                   <tr>
                       <td style="width: 139px; text-align:right;">
                           <span style="color: #ff0066">※</span>联系方式：</td>
                       <td style="width: 100px;">
                           <asp:TextBox ID="tbx_hedaitonc" TextMode="MultiLine" runat="server" Width="334" Text="" Height="85px"></asp:TextBox>
                       </td>
                   </tr>
                   <tr>
                       <td style="width: 139px; text-align:right; height: 184px;">
                           <span style="color: #ff0066">※</span>合作项目描述：</td>
                       <td style="width: 100px; height: 184px;">
                           <textarea id="tta_hebeizhu" cols="48" rows="11"></textarea>
                       </td>
                   </tr>
                   <tr>
                       <td colspan="2" style="text-align:center;">
                            <div id="Message" style="display:block;"></div>
                           <input id="btn_subTogether" type="button" class="btn" onmouseover='this.className="btn3_mouseover"' onmouseout='this.className="btn3_mouseout"' value="提交" onclick="subTogther()" />
                   </tr>
               </table>

</form>

我们看完了页面的组成部分,接下来我们来建一个WebService服务(CS代码如下):

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services; //一定要加入此命名空间

/// <summary>
/// TigetherService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService] //一定要加入此特性
public class TigetherService : System.Web.Services.WebService {

public TigetherService () {

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

    [WebMethod]
    public string AddItemTogether(string jigou, string itemName,string lianxi,string remark)
    {

        //执行的方法体,在这里我只将插入到数据库里的CS代码写到这里,因为后面的数据库连接类就非常简单了,在此不再讲述;
        string mID = "1";
        string sql = "insert into CooperateItem(itemName,applyjigou,lianxi,reamk,AddMan) values('" + itemName + "','" + jigou + "','" + lianxi + "','" + remark + "','" + mID + "')";
        SqlHelper sh = new SqlHelper();
        int i = sh.Add(sql);
        return i.ToString();
    }
}

接下来就是最为关键的一步了,那就是如何使客户端与服务器端的WebService来进行通信了,我们一起来看看:

function subTogther()
{
document.getElementById("Message").innerHTML='<span style="color:red;">正在提交,请稍候...</span>';

   //因为我们在客户端的页面上使用了ScriptManager控件,所以我们可以直接使用$get("")来获取值;
    var jigou=$get("txt_hedai").value;
    var itemName=$get("txt_hename").value;
    var lianxi=$get("Together1_tbx_hedaitonc").value;
    var remark=$get("tta_hebeizhu").value;
   //实例化我们刚刚创建的WebService并调用其中的AddItemTogether方法,具体的参数列表一定要和我们刚创建的WebService中的方法列表数一样,说到这里你可能觉得有些奇怪了,下面的这句代码里怎么多出了一个叫reTogther的参数,对的,你的眼睛真不错,是多出了这么一个参数,其实啊,他是用来作回调函数的;
    new TigetherService().AddItemTogether(jigou,itemName,lianxi,remark,reTogther);
}

function reTogther(result)
{
    if(result=='1')
    {
        document.getElementById("Message").innerHTML='提交成功';
    }
}

如此一来,整个客户端与服务器端的通信交互就完成了,效果非常的不错!