WebService跨域配置、Ajax跨域请求、附开发过程源码

  项目开发过程中需要和其他公司的数据对接,当时我们公司提供的是WebService,本地测试,都是好的,Ajax跨域请求,就报错,配置WebService过程中,花了不少功夫,入不少坑,不过最终问题还是解决啦~~~特意将完整开发步骤记录下来,以备下次勿犯,废话不多说,直接上源码!

第一步,右键,新建项,添加"web服务"

第二步:在webservice项目的web.config中添加如下配置,缺一不可:

 1 <system.web>
 2    <webServices>
 3       <protocols>
 4         <add name="HttpGet"/>
 5         <add name="HttpPost"/>
 6         <add name="HttpSoap"/>
 7         <add name="Documentation"/>
 8       </protocols>
 9     </webServices>
10   </system.web>
11   <system.webServer>
12     <httpProtocol>
13       <customHeaders>
14         <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
15         <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
16         <add name="Access-Control-Allow-Origin" value="*"/>
17       </customHeaders>
18     </httpProtocol>
19   </system.webServer>

注意事项

第三步:写接口函数(以下仅供参考)

 1     #endregion
 2     /// <summary>
 3     /// 实体类
 4     /// </summary>
 5     public class TaskList {
 6         public string taskCode { get; set; }
 7         public string ACTUAL_START { get; set; }
 8         public string ACTUAL_END { get; set; }
 9     }
10     /// <summary>
11     /// 返回值
12     /// </summary>
13     public class ret
14     {
15         public string success { get; set; }
16         public string msg { get; set; }
17     }
18     /// <summary>
19     /// 生产任务完成情况
20     /// </summary>
21     /// <param name="taskCode">生产任务号</param>
22     /// <param name="ACTUAL_START">实际开始时间</param>
23     /// <param name="ACTUAL_END">实际结束时间</param>
24     /// <returns>1:成功;0:失败</returns>
25     [WebMethod(Description="生产任务完成情况")]
26     public String GetTaskInfo(string jsonDate)
27     {
28         TaskList model = JsonUtil.JsonStrToObject<TaskList>(jsonDate);
29         ret obj = new ret();
30         try
31         {
32             if (model.taskCode.Trim() ==null)
33             {
34                 obj.success = "false";
35                 obj.msg = "生产任务号为空!";
36                 return JsonConvert.SerializeObject(obj);
37             }
38             if (model.ACTUAL_START.Trim() == null)
39             {
40                 obj.success = "false";
41                 obj.msg = "实际开始时间为空!";
42                 return JsonConvert.SerializeObject(obj);
43             }
44             if (model.ACTUAL_END.Trim() == null)
45             {
46                 obj.success = "false";
47                 obj.msg = "实际结束时间为空!";
48                 return JsonConvert.SerializeObject(obj);
49             }
50             DateTime.Parse(model.ACTUAL_START);
51             DateTime.Parse(model.ACTUAL_END);
52             List<string> list = new List<string>();
53             string editSql = "UPDATE EMES_PL_TASK_LIST SET ACTUAL_START=TO_DATE(‘{0}‘,‘YYYY-MM-DD HH24:MI:SS‘),ACTUAL_END=TO_DATE(‘{1}‘,‘YYYY-MM-DD HH24:MI:SS‘) WHERE TASK_ID=‘{2}‘";
54             list.Add(string.Format(editSql, model.ACTUAL_START, model.ACTUAL_END, model.taskCode));
55             #region 接口操作日志
56             string addSql = "INSERT INTO EMES_PL_TASK_LIST_LOG (TASK_CODE,ACTUAL_START,ACTUAL_END,DEF_DATA) VALUES (‘{0}‘,‘{1}‘,‘{2}‘,TO_DATE(‘{3}‘,‘YYYY-MM-DD HH24:MI:SS‘))";
57             list.Add(string.Format(addSql, model.taskCode, model.ACTUAL_START, model.ACTUAL_END,DateTime.Now));
58             #endregion
59
60             int ret = DbUtil.ExecuteSqlTran(list);
61             if (ret > 0)
62             {
63                 obj.success = "true";
64                 obj.msg = "";
65                 return JsonConvert.SerializeObject(obj);
66             }
67             else
68             {
69                 obj.success = "false";
70                 obj.msg = "生产任务号不存在,数据未同步!";
71                 return JsonConvert.SerializeObject(obj);
72             }
73         }
74         catch (Exception ex)
75         {
76             obj.success = "false";
77             obj.msg = ex.Message;
78             return JsonConvert.SerializeObject(obj);
79         }
80     }

第四步:网页测试接口

Ajax调用测试接口示例

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta http-equiv="Access-Control-Allow-Origin" content="*" />
 6     <title></title>
 7     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 8     <script type="text/javascript">
 9         $(function () {
10             $("#getdata").click(function () {
11                 var dataStock = { taskCode: "1238", ACTUAL_START: "2019-6-1", ACTUAL_END: "2019/5/19 22:09:37" };
12                 $.ajax({
13                     url: "http://localhost:16340/webService/eCimsService.asmx/GetTaskInfo",
14                     type: ‘POST‘,
15                     data:‘jsonDate=‘+JSON.stringify(dataStock),
16                     success: function (res) {
17                         var js =JSON.parse($(res).text()) //将xml转json
18                         debugger;
19                         console.log(js.success);
20                     },
21                     error: function (err) {
22                         debugger;
23                         console.log(err);
24                     }
25                 });
26             });
27         });
28     </script>
29 </head>
30 <body>
31     <a id="getdata" href="javascript:void(0);">获取webservice数据</a>
32     <div id="data"></div>
33 </body>
34 </html>

注:后台默认传json类型,到前台后,WebService自动转成了XML格式,需转换下数据类型JSON.parse(str)

跨域访问WebService搞定!

原文地址:https://www.cnblogs.com/chenyanbin/p/11125758.html

时间: 2024-08-13 02:01:45

WebService跨域配置、Ajax跨域请求、附开发过程源码的相关文章

mysql配置主从复制,读写分离(附amoeba源码包)

mysql5.5基于表锁定 读取和写入互阻塞,为了解决这个问题便有了主从复制,读写分离的群集设置.三次认证1.主从同步认证2.amoeba访问数据库认证3.客户端访问amoeba认证 写入和读取:客户端写入数据写入到的是mysql主服务器中从服务器同步主服务器读取是读取从服务器上的内容从而实现读写分离 本实验使用mysql5.5附mysql5.5源码包以及安装脚本链接:https://pan.baidu.com/s/1kA80VX67fXOBVChUt72__g 密码:e42o jdk文件使用的

session跨域和ajax跨域名

后台跨域和ajax跨域名: 后台跨域: www.baidu.com   主域名(一级域名一般以www开头) news.baidu.com   二级域名 (a.test.com和b.test.com有相同的域,和test.a.com不是同一个域) 同一个域下可以使用setcookie( '名字' , 'session_id' , 'time()+3600' , '/' , '域' );来存储session_id. 例如:a.php在a.test.com下    b.php在b.test.con下

Hadoop2.2.0分布式环境配置笔记2-编译64位hadoop源码

11.配置hadoop分布式环境!  三台机器都需要这么配置 1).将/opt/modules/hadoop-2.2.0-src重命名  mv /opt/modules/hadoop-2.2.0-src/ /opt/modules/hadoop-2.2.0-src_x32_back 2).解压64位源码 tar -zxvf /opt/modules/hadoop-2.2.0-src_x32_back/hadoop-dist/target/hadoop-2.2.0.tar.gz -C /opt/m

Hadoop2.2.0分布式环境配置笔记1-编译64位hadoop源码

我的测试环境是三台机器 分别是 Hadoop-Yarn.Hark.Com 192.168.1.200 Hadoop-Slave1.Hark.Com 192.168.1.201 Hadoop.Slave2.Hark.Com 192.168.1.202 我为了自己能充分练习hadoop 64位源码编译,所以三台机器都进行了下边的配置 环境: vmware9+centos6.4+hadoop2.2.0 0.创建hadoop帐号,大部分操作都要使用hadoop帐号的 1.关闭窗口模式 使用root账号

在Eclipse配置并编译worldwind java2.1.0源码,选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.java类文件run时提示“javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)V”异常的解决办法

问题现象: 在Eclipse配置并编译worldwind java2.1.0源码,选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.java类文件run时提示“javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)V”异常. 解决办法: 1.定位到报错的方法为WWXML.java文件中的createDocumentBuilder方法: pub

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不

HTTP请求库——axios源码阅读与分析

概述 在前端开发过程中,我们经常会遇到需要发送异步请求的情况.而使用一个功能齐全,接口完善的HTTP请求库,能够在很大程度上减少我们的开发成本,提高我们的开发效率. axios是一个在近些年来非常火的一个HTTP请求库,目前在GitHub中已经拥有了超过40K的star,受到了各位大佬的推荐. 今天,我们就来看下,axios到底是如何设计的,其中又有哪些值得我们学习的地方.我在写这边文章时,axios的版本为0.18.0.我们就以这个版本的代码为例,来进行具体的源码阅读和分析.当前axios所有

Android网络请求框架—OKHttp 源码解析

总体流程 整个流程是,通过OkHttpClient将构建的Request转换为Call,然后在RealCall中进行异步或同步任务,最后通过一些的拦截器interceptor发出网络请求和得到返回的response. 将流程大概是这么个流程,大家可以有个大概的印象,继续向下看: OkHttp流程图.jpg 为了让大家有更深的印象,我准备追踪一个GET网络请求的具体流程,来介绍在源码中发生了什么. GET请求过程 这是利用OkHttp写一个Get请求步骤,这里是一个同步的请求,异步的下面也会说: