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

时间:2023-03-09 18:27:33
WebService跨域配置、Ajax跨域请求、附开发过程源码

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

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

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

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

 <system.web>
<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
<add name="HttpSoap"/>
<add name="Documentation"/>
</protocols>
</webServices>
</system.web>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
<add name="Access-Control-Allow-Origin" value="*"/>
</customHeaders>
</httpProtocol>
</system.webServer>

注意事项

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

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

     #endregion
/// <summary>
/// 实体类
/// </summary>
public class TaskList {
public string taskCode { get; set; }
public string ACTUAL_START { get; set; }
public string ACTUAL_END { get; set; }
}
/// <summary>
/// 返回值
/// </summary>
public class ret
{
public string success { get; set; }
public string msg { get; set; }
}
/// <summary>
/// 生产任务完成情况
/// </summary>
/// <param name="taskCode">生产任务号</param>
/// <param name="ACTUAL_START">实际开始时间</param>
/// <param name="ACTUAL_END">实际结束时间</param>
/// <returns>1:成功;0:失败</returns>
[WebMethod(Description="生产任务完成情况")]
public String GetTaskInfo(string jsonDate)
{
TaskList model = JsonUtil.JsonStrToObject<TaskList>(jsonDate);
ret obj = new ret();
try
{
if (model.taskCode.Trim() ==null)
{
obj.success = "false";
obj.msg = "生产任务号为空!";
return JsonConvert.SerializeObject(obj);
}
if (model.ACTUAL_START.Trim() == null)
{
obj.success = "false";
obj.msg = "实际开始时间为空!";
return JsonConvert.SerializeObject(obj);
}
if (model.ACTUAL_END.Trim() == null)
{
obj.success = "false";
obj.msg = "实际结束时间为空!";
return JsonConvert.SerializeObject(obj);
}
DateTime.Parse(model.ACTUAL_START);
DateTime.Parse(model.ACTUAL_END);
List<string> list = new List<string>();
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}'";
list.Add(string.Format(editSql, model.ACTUAL_START, model.ACTUAL_END, model.taskCode));
#region 接口操作日志
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'))";
list.Add(string.Format(addSql, model.taskCode, model.ACTUAL_START, model.ACTUAL_END,DateTime.Now));
#endregion int ret = DbUtil.ExecuteSqlTran(list);
if (ret > )
{
obj.success = "true";
obj.msg = "";
return JsonConvert.SerializeObject(obj);
}
else
{
obj.success = "false";
obj.msg = "生产任务号不存在,数据未同步!";
return JsonConvert.SerializeObject(obj);
}
}
catch (Exception ex)
{
obj.success = "false";
obj.msg = ex.Message;
return JsonConvert.SerializeObject(obj);
}
}

第四步:网页测试接口

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

Ajax调用测试接口示例

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#getdata").click(function () {
var dataStock = { taskCode: "1238", ACTUAL_START: "2019-6-1", ACTUAL_END: "2019/5/19 22:09:37" };
$.ajax({
url: "http://localhost:16340/webService/eCimsService.asmx/GetTaskInfo",
type: 'POST',
data:'jsonDate='+JSON.stringify(dataStock),
success: function (res) {
var js =JSON.parse($(res).text()) //将xml转json
debugger;
console.log(js.success);
},
error: function (err) {
debugger;
console.log(err);
}
});
});
});
</script>
</head>
<body>
<a id="getdata" href="javascript:void(0);">获取webservice数据</a>
<div id="data"></div>
</body>
</html>

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

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

跨域访问WebService搞定!