100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Html中使用jquery通过Ajax请求WebService接口以及跨域问题解决

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

时间:2020-03-22 17:07:12

相关推荐

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

场景

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

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

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

请求和解析数据。

注:

博客:

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

实现

1、WebSerivce返回json字符串。

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

​[WebService(Namespace = "/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][ponentModel.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数据了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。