jQuery教程 .NET中Ajax跨越访问
沉沙 2018-09-20 来源 : 阅读 1336 评论 0

摘要:本篇教程介绍了jQuery教程 .NET中Ajax跨越访问,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 .NET中Ajax跨越访问,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

<

说明:我们知道Ajax是不能进行跨域请求的,我们是可以设置我们的项目让Ajax支持跨域访问。 
 跨域: aa.xxx.com 中用ajax请求  bb.ccc.com中的数据成为跨域。
找了一些文章看了的, 无非都是说 jsonp是get的解决办法,cross是post请求的解决办法。这边自己也测试了下。这边记录一下。
①我们先准备好我们的接口

 
然后需要我们发布一下,这个就是我们的接口地址了() ://apitest.sealee.xin/api/ajaxcross (get/post(请求的body为: ‘{"Name":"sealee"}‘  json字符串 ))  

//apitest.sealee.xin/api/ajaxcross  如果出现下面信息证明接口有效,否则无效

 
②什么都不做处理进行Aajx请求
本机上创建一个页面,进行访问接口数据



@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>测试Ajax跨越请求</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquerycookie/jquery.cookie.js"></script>
    <script>
        $(document).ready(function () {
            $(‘#GetCross‘).bind(‘click‘, function () {
                var ob = {
                    name: "sealee"
                };
                $.ajax({
                    type: "get",
                    async: true,
                    url: "//apitest.sealee.xin/api/AjaxCross",
                    dataType: "json",
                    beforeSend: function () {
                        //请求前的处理
                    },
                    success: function (data) {
                        //请求成功处理,和本地回调完全一样
                        console.log(data);
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                });

            });
            $(‘#PostCross‘).bind(‘click‘, function () {
                var ob = {
                    Name: "sealee"
                };
                $.cookie("testCookie", "123456");
                $.ajax({
                    type: ‘POST‘,
                    headers: {
                        ‘contentType‘: "application/json; charset=utf-8"   //有头部信息会执行optings请求
                    },
                    //xhrFields: {
                    //    withCredentials: true // 这里设置了withCredentials  能不能传递cooikes
                    //},
                    url: "//apitest.sealee.xin/api/AjaxCross",
                    dataType: "json",
                    data: JSON.stringify(ob),  //传递的json格式
                    success: function (data) {
                        console.log(data);
                    }
                })

            });


        });
    </script>
</head>
<body>
    <div>
        <button id="GetCross"> Get跨越</button>
        <button id="PostCross"> Post跨越</button>
    </div>
</body>
</html>

View Code
我们点击Get,Post都是会报错的

 
③解决办法   网上找了些方法,说需要 js和服务端都需要做改变,自己做了一些尝试,最后结果:我们保持我们的js代码不变,只是在服务端进行了配置,就可以实现跨域请求
在web.config里面配置了这些,也可以写个过滤器在代码里面进行添加,如果不安全,可以在头部设置一些信息来确保消息的请求来源。
 1.写在web.config中
 
 2.代码


然后再进行调试
 
跟踪我们的请求,你会发现,有三次请求

  
 
 类型为OPTIONS的时候,只有当我们的ajax请求中出现了头部信息才会执行,当OPTIONS执行成功的时候才会去执行Post请求。
注释我们的头部请求设置,然后点击Post提交


   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程