Html中使用jquery通过Ajax请求WebService接口以及跨域问题解决
生活随笔
收集整理的這篇文章主要介紹了
Html中使用jquery通过Ajax请求WebService接口以及跨域问题解决
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
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接口以及跨域问题解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实用新型和外观专利的区别
- 下一篇： k-匿名（k-Anonymity）