HTML页面使用ajax调用webservice接口

最新推荐文章于 2021-06-09 18:59:01 发布

11小猪会飞11

最新推荐文章于 2021-06-09 18:59:01 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： webservice 文章标签： webservice html

本文链接：https://blog.youkuaiyun.com/SS33SSS/article/details/101352607

webservice 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用C#创建Web Service，并解决跨域调用的问题。通过配置web.config文件允许跨域请求，并展示了一个具体的HTML示例，说明了如何利用jQuery发起AJAX调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

二解决webservice 跨域问题，

1：打开web.config，

添加部分为

<system.webServer>

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