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

柔光的暖阳◎ 2023-10-10 18:23 34阅读 0赞

## 场景 ##

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

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

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

请求和解析数据。

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][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",是根据接口中的提示确定的

![b3f5a2dc2e784dc1b0ff509bd6ce8202.png][]

请求到数据后进行处理

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

![46c4f248c2024708b6302aa2a9e13d13.png][]

这是因为接口返回的是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>
          <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>

修改位置

![f4d7c249458e420aa9c1778f5a989a7f.png][]

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

![d3cfd670ba75414391bd3defc40af1ae.png][]

[VS2019_WebService_Web_asmx_IIS_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/130743584
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[b3f5a2dc2e784dc1b0ff509bd6ce8202.png]: https://img-blog.csdnimg.cn/b3f5a2dc2e784dc1b0ff509bd6ce8202.png
[46c4f248c2024708b6302aa2a9e13d13.png]: https://img-blog.csdnimg.cn/46c4f248c2024708b6302aa2a9e13d13.png
[f4d7c249458e420aa9c1778f5a989a7f.png]: https://img-blog.csdnimg.cn/f4d7c249458e420aa9c1778f5a989a7f.png
[d3cfd670ba75414391bd3defc40af1ae.png]: https://img-blog.csdnimg.cn/d3cfd670ba75414391bd3defc40af1ae.png