一个简单的Webservice的demo(中)_前端页面调用

时间:2021-11-07 22:25:09

  首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图:

  一个简单的Webservice的demo(中)_前端页面调用

  先引用写好的服务,这里用上次写好的服务。见上次写的一个简单的Webservice的demo,简单模拟服务

  一个简单的Webservice的demo(中)_前端页面调用 

  这里我们要新建一个服务,调用我们引用给服务。因为一般情况下js不能跨域访问服务的,当然,只是一般,要非得跨域访问也行,网上搜方法,但是那样做就没意义了。新建服务,取名MyJsWebservice,如下图:

  一个简单的Webservice的demo(中)_前端页面调用

  在服务中调用引用的服务,并将Ajax脚本调用改取消的注释取消。如下图:

  一个简单的Webservice的demo(中)_前端页面调用

  生成以下解决方案,现在我们在页面上调用。使用jQuery,Ajax调用。

  前端代码:  

 <head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WebserviceTest</title>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSure").click(function () {
var birthday = $("#birthday").val();
$.ajax({
type: "Post", //Post传参
url: "/MyJsWebservice.asmx/WhoAreYou",//服务地址
data: "{birthday:'"+birthday+"'}",//参数
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function (result) {
// 调用成功后,将获取的名字填入name文本框中。
$("#name").val(result.d);
},
error: function (e) {
window.alert(e.status);
}
})
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
请输入您的生日:
<input type="text" id="birthday" />
<input type="text" id="name" /><input type="button" id="btnSure" value="确 定" />
</div>
</form>
</body>

  测试成功:

  一个简单的Webservice的demo(中)_前端页面调用