HTML页面使用ajax调用webservice接口

一、创建webservice C#工程,WebService1.asmx内容如下

 

 

二 解决webservice 跨域问题,

1:打开web.config,

添加部分为 

<system.webServer>
   <!--// 解决跨域请求 by wys--> 
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type" />
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

如下图:

2:打开WebService1.asmx

修改内容如下:

   [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]

 三 发布到服务器

网上有很多教程啦,这里就不写了。

四 html 内容 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
   <script type="text/javascript">
          $(function () {
              $("#btnSure").click(function () {
                 var a = $("#a").val();
                 $.ajax({
                     type: "Post", //Post传参
                     url: "http://127.14.160.175:802/WebService1.asmx/Add",//服务地址
                     data: "{a:'"+a+"'}",//参数
                     dataType: "json",                    
                     contentType: "application/json;charset=utf-8",
                     success: function (result) {
                         // 调用成功后,将获取的名字填入name文本框中。
                         $("#name").val(result.d);
                     },
                     error: function (e) {
                         window.alert(e.status);
                     }
                 })
             })
         })
    </script>

    <meta charset="utf-8" />
</head>
<body>
     <div>
        <input type="text" id="a" />
        <input type="text" id="name" />
        <input type="button" id="btnSure" value="确 定" />
    </div>
</body>
</html>

结果:调用webservice的Add方法,在第一个编辑框输入2,第二个编辑框会显示4,大功告成。

有不懂的地方可以问我啦。 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
使用 AJAX 调用 Java WebService 接口,可以按照以下步骤操作: 1. 创建一个 Java WebService,例如使用 JAX-WS 标准,可以使用 JavaEE 环境或者 Apache CXF 等开源框架。 2. 在 WebService 中定义接口方法,例如: ``` @WebService public interface HelloWorld { @WebMethod String sayHello(String name); } ``` 3. 实现接口方法,例如: ``` @WebService(endpointInterface = "com.example.HelloWorld") public class HelloWorldImpl implements HelloWorld { @Override public String sayHello(String name) { return "Hello " + name + "!"; } } ``` 4. 部署 WebService 到服务器上,例如使用 Tomcat 等 Servlet 容器。 5. 在客户端页面使用 AJAX 调用 WebService 接口,例如: ``` $.ajax({ type: "POST", url: "http://localhost:8080/HelloWorld", data: JSON.stringify({ name: "World" }), contentType: "application/json", dataType: "json", success: function (response) { alert(response); }, error: function (xhr, status, error) { alert("Error: " + error); } }); ``` 其中,url 参数为 WebService 的访问地址,data 参数为传递给接口方法的参数,contentType 参数为请求数据的 MIME 类型,dataType 参数为响应数据的 MIME 类型。在 success 回调函数中可以处理接口方法的返回值,而在 error 回调函数中可以处理错误信息。 注意,由于 AJAX 调用涉及跨域问题,需要在服务器端设置 CORS(跨域资源共享)或者使用 JSONP(JSON with Padding)等方式解决。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值