动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

jQuery调用Web Service

09-15 17:03 66浏览
举报 T字号
  • 大字
  • 中字
  • 小字

Web Service是一个平台独立的,低耦合的,自包含的、基于可编程的web的应用程序返回的数据格式是XML,由于XML文件格式文件庞大、格式复杂、传输占用宽带并且服务器端与客户端解析XML花费资源和时间;而Json的数据格式比较简单、占用宽带小并且相当稳定;所以接下来我们就利用JSON格式使用jQuery调用Web Service

1. 新建一个Web应用程序的项目,并新建 Web 服务,命名为WebService.asmx

    2. 为WebService.asmx写方法,下面做一个相对而言比较简单的方法;

    a) 在该Web Service中不能重载,需要确保Web Service能运行

    b) 必须有[System.Web.Script.Services.ScriptService],如果没有它,在前台页面不会调用到该服务。

    using System;

  using System.Collections;

  using System.ComponentModel;

  using System.Data;

  using System.Linq;

  using System.Web;

  using System.Web.Services;

  using System.Web.Services.Protocols;

  using System.Xml.Linq;

 using System.Text;

 using System.Collections.Generic;

 

namespace jqueryandWCF

 {

     ///

 

 

    /// WebService 的摘要说明

 

    ///

 

 

    [WebService(Namespace = "http://tempuri.org/")]

 

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

 

     [ToolboxItem(false)]

 

     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。

 

     [System.Web.Script.Services.ScriptService]

 

     public class WebService : System.Web.Services.WebService

 

    {

 

         [WebMethod]

 

        public string HelloWorld(string userName)

 

        {

 

            return "Hello " + userName +" !";

 

         }

 

     }

 

 }

 

3. HTML页面,我们可以点击某一按钮时来调用该服务.

 

    1)ajax中的data:"{}"是用于传递方法中的参数,格式为:data:"{paraName:paraValue}",如果该方法无参数,则格式为:data:"{}"

 

    2) 如果成功,我是以HTML的形式显示它的值,大家可以用其它方法,取它的值时用(result.d)

 

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqueryandWCF._Default" %>


 
 <!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="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  
     <script type="text/javascript">
        $(document).ready(function() {
            #region ===这段不用===
            //当启动ajax时显示该图片,相反就隐藏该图片
             /*
            $("#loading").ajaxStart(function() {
                 $(this).show();
             })
            $("#loading").ajaxStop(function() {
                 $(this).hide();
             })
            */
            #endregion
            
             $("#Button1").click(function() {
                 try {
                     $.ajax({
                         type: "POST",  //访问WebService使用post方式请求
                         contentType: "application/json;utf-8",   //WebService会返回json类型
                        url: "WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合
                         data: "{userName:'Jodie'}",  //这里是要传递的参数,格式为data:"{paraName:paraValue}"
                         dataType: "json",
                         success: function(result) {
                             $("#result").html(result.d);
                        }
                     })
                 }
                 catch (ex) {
                     alert(ex);
                 }
             })
         })
       
     </script>
 
 </head>
 <body>
     <form id="form1" runat="server">
     <input id="Button1" type="button" value="Invoke1" />
     <div id="result">
         <img id="loading" style="display: none;" alt="loading" src="Images/图1.bmp" />
     </div>
     </form>
 </body>
 </html>

4.输出结果如下:

以上就是整个jQuery调用Web Service的过程,主要还是利用了JSON数据格式的特点从而完成整个调用。想学习更多调用Web Service的方法可以观看本站的Web Service视频教程,里面还有许多可供参考的实例可以学习。

0人推荐
共同学习,写下你的评论
0条评论
代码小兵1268
程序员代码小兵1268

11篇文章贡献53362字

作者相关文章更多>

推荐相关文章更多>

DOM渲染的详细过程

QCode09-04 14:38

CSS水平和垂直居中技巧大梳理

Code大师09-04 14:50

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

不写代码你养我啊08-23 11:14

推荐的-视.频播放器以及在线客服

不写代码你养我啊09-17 18:02

谈谈java多线程的三大特性

要学习了06-18 18:13

发评论

举报

0/150

取消