场景

VS2019新建WebService/Web服务/asmx并通过IIS实现发布和调用：

VS2019新建WebService/Web服务/asmx并通过IIS实现发布和调用_霸道流氓气质的博客-CSDN博客

在上面实现发布WebService的基础上，怎样在html中通过jquery对接口发起

请求和解析数据。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主

实现

1、WebSerivce返回json字符串。

这里直接使用转义后的json模拟数据

[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.ComponentModel.ToolboxItem(false)]public class WebService1 : System.Web.Services.WebService{[WebMethod]public string GetLocStatusInfo(string CardNum,string CardType){return "{\"Code\":\"1\",\"Message\":\"\",\"result\":[{\"cardnum\":\"5904\",\"devNum\":\"31794\",\"isinwell\":\"1\"}]}";}}

2、新建html，并引入Jquery

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-3.5.1.min.js" type="text/javascript"></script><script type="text/javascript">window.setInterval(() => {//响应正常$.ajax({type: "get", //这样会提示 缺少参数: CardNum。//url: `http://ip:8899/KjtxLocService.asmx/GetLocStatusInfo`,url: `http://ip:8899/KjtxLocService.asmx/GetLocStatusInfo?CardNum=&CardType=3`,dataType: "xml",contentType: "application/xml",success: (result) => {let data = JSON.parse(result.getElementsByTagName('string')[0].innerHTML);console.log(data);},error: function(e) {console.log(e);},});}, 6000) </script>
</head>
<body></body>
</html>

这里使用定时器对接口发起定时调用。

这里的contentType: "application/xml",是根据接口中的提示确定的

请求到数据后进行处理

let data = JSON.parse(result.getElementsByTagName('string')[0].innerHTML)

这是因为接口返回的是xml中包含着json字符串。

3、此时直接在浏览器中打开该html，查看控制台会提示跨域

需要修改webservice中的Web.config文件，在configuration中配置允许跨域请求

  <system.webServer><!--配置为列出此目录的内容--><directoryBrowse enabled="true"/><!--配置允许跨域请求--><httpProtocol><customHeaders><add name="Access-Control-Allow-Origin" value="*" /><add name="Access-Control-Allow-Headers" value="*"/><add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/></customHeaders></httpProtocol></system.webServer>

如果需要在其他机器上远程访问，还需要在configuration开启如下配置

  <system.web><!--配置允许远程调用webservices--><webServices><protocols><add name="HttpSoap"/><add name="HttpPost"/><add name="HttpGet"/><add name="Documentation"/></protocols></webServices><compilation debug="true" targetFramework="4.5" /><httpRuntime targetFramework="4.5" /></system.web>

修改位置

4、此时则不会再出现跨域提示，也能正常获取json数据了

Html中使用jquery通过Ajax请求WebService接口以及跨域问题解决相关推荐

Ajax请求利用jsonp实现跨域
跨域: js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢, 举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资 ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
使用jQuery在AJAX请求中添加标头
本文翻译自:Add header in AJAX request with jQuery I would like to add a custom header to an AJAX POST req ...
jQuery 发送 AJAX 请求
AJAX 请求状态 xhr.readyState 可以用来查看请求当前的状态参考官方文档的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/XM ...
ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
ajax返回的图片数据格式,jquery发送ajax请求返回数据格式
jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等. 1.html格式的数据 " "+username+" ...
Ajax中option什么意思,AJAX请求中出现OPTIONS请求
背景有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求 ...
ajax数据交互代码,Django中使用jquery的ajax进行数据交互的实例代码
jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择最终实现效果如图: 将jque ...
php和ajax实现聊天功能,怎么在PHP项目中使用jquery与ajax实现一个即时聊天功能
怎么在PHP项目中使用jquery与ajax实现一个即时聊天功能发布时间:2020-12-19 16:19:01 来源:亿速云阅读:81 作者:Leah 本篇文章给大家分享的是有关怎么在PHP项目 ...

Html中使用jquery通过Ajax请求WebService接口以及跨域问题解决

场景

实现

Html中使用jquery通过Ajax请求WebService接口以及跨域问题解决相关推荐

最新文章

热门文章