Flask提供json api跨域访问,ajax接收json数据

ajax在判断请求成功时会判断返回的数据是否为json,需要将response的content-type设置为application/json,数据为标准的json格式

jQuery版本

<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

flask代码示例

@app.route(‘/test‘,methods=[‘GET‘,‘POST‘])
def test():
    a = []
    a.append(Newobject().__dict__)
    #设置content-type
    resp=Response(json.dumps(a),mimetype=‘application/json‘)
    #支持跨域请求
    resp.headers[‘Access-Control-Allow-Origin‘] = ‘*‘
    return resp

  

ajax示例,请求返回的结果为result,一个json转换后的对象

$.ajax({
                url:"http://192.168.11.130/test",
                type:‘GET‘,
                dataType:‘JSON‘,
               success:function (result) {

                    console.log("ajax succeed")
                   console.log(typeof(result))
                    obj=result;
                    var pcapdata=‘‘;
                    for(var i=0;i<obj.length;i++)
                    {
                        pcapdata=pcapdata+‘<tr>‘
                        pcapdata=pcapdata+‘<td>‘+obj[i].time+‘</td>‘;
                        pcapdata=pcapdata+‘<td>‘+obj[i].srcip+‘</td>‘;
                        pcapdata=pcapdata+‘<td>‘+obj[i].dstip+‘</td>‘;
                        pcapdata=pcapdata+‘<td>‘+obj[i].httphost+‘</td>‘;
                        pcapdata=pcapdata+‘<td>‘+obj[i].requesturi+‘</td>‘;
                        pcapdata=pcapdata+‘<td>‘+obj[i].pcapfile+‘</td>‘+‘</tr>‘;
                    }

                    document.getElementById("td1").innerHTML=pcapdata;

                    }

            })

  

原文地址:https://www.cnblogs.com/QQQmadNULL/p/9017455.html

时间: 2024-10-09 07:19:10

Flask提供json api跨域访问,ajax接收json数据的相关文章

Web Api跨域访问配置及调用示例

1.Web Api跨域访问配置. 在Web.config中的system.webServer内添加以下代码: <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="*" />

ASP.NET Web API 跨域访问

情景:http://localhost:8080/的web应用下访问http://localhost:8081下的Action时称为跨域访问. 前提,启动8080web应用实例,再启动8081web应用实例利用ajax去访问. 首先,在自己的Web API应用中,添加NuGet服务包,联机: 然后选择图中的,安装: 在Web API应用的App_Start/WebApiConfig.cs下的 public static void Register(HttpConfiguration config

ASP.NET Web API 跨域访问(CORS)要注意的地方

一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignature": "嫁人要嫁程序员,钱多话少死得早"} 然而,JSONP请求期望得到这样的JSON: jQuery123456({"YourSignature": "嫁人要嫁程序员,钱多话少死得早"}) 所以我们需要对WebAPI做拓展,让它支持这

asp.net关于如何准许api跨域访问

首先需要在原api接口的程序中在web.config添加如下节点(在<system.webServer>节点下) <!--准许跨域请求--> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers&qu

Web API跨域访问

JS调用接口最需要注意的就是跨域问题 在.net平台下使js跨域变得非常简单 1.在nuget中引用 Microsoft ASP.NET Web API 2.2 Cross-Origin Support 包 2.再 Application_Start() 中加入 //跨域 GlobalConfiguration.Configuration.EnableCors(); 3.在 web.config 中设置权限 <system.webServer>  节点下  <httpProtocol&g

html5客户端跨域访问php服务端数据

客户端代码: var param = $.param( { feed:JSON.stringify({ content:'abcd' }) } ); $http({ url: 'http://61.153.100.80/pay/talent.php', method: "POST", data:param, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(data, s

JAX-RS开发(四):ajax跨域访问REST服务时的cors解决方案

上一篇博客我们通过JSONP解决AJAX跨域问题,本文将通过CORS来解决跨域问题.CORS是HTML5新推出的,需要较高版本的浏览器才能支持.我用的IE11和Chrome41,都是支持CORS规范的.cors可以参考下面几篇文章: cors规范 http://www.w3.org/TR/cors/ cors浏览器兼容性 http://caniuse.com/#search=cors tomcat7的cors解决方案 http://tomcat.apache.org/tomcat-7.0-doc

用jQuery与JSONP轻松解决跨域访问的问题【转】

原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显

jQuery 跨域访问问题解决方法(转)

转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目