json post后在javascript中从python访问值

Posted

技术标签:

【中文标题】json post后在javascript中从python访问值【英文标题】:Accessing values from python in javascript after json post 【发布时间】:2021-01-09 01:57:58 【问题描述】:

发誓我以前做过,永远不知道要改变什么

Python

@csrf_exempt
def add_trip_to_map(request):
    trip_id = request.POST['trip_id']
    trip = Trip.objects.get(pk = trip_id)
    orig, dest = trip.load.orig, trip.load.dest
    data = 'orig_lat':str(orig.lat),
            'orig_lon':str(orig.lon),
            'dest_lat':str(dest.lat),
            'dest_lon':str(dest.lon)
    return HttpResponse(json.dumps(data))

JS

    $.post( "% url 'add_trip_to_map' %",  trip_id: trip_id , function( data ) 
console.log(data);
    //console.log(data["dest_lon"]);

    var marker = new mapboxgl.Marker()
.setLngLat([data["dest_lat"], data["dest_lon"]])
.addTo(map);

console.log(data) 如下所示:

"orig_lat": "33.493100", "orig_lon": "117.131700", "dest_lat": "32.454500", "dest_lon": "99.738100"

但我无法访问 js 中的值

lng_lat.js:40 Uncaught Error: Invalid LngLat object: (NaN, NaN)

【问题讨论】:

【参考方案1】:

我假设您的第一个问题是:您的帖子的返回值是一个字符串。如果是这样,你需要转换它:

 data = JSON.parse(data);

第二个问题与您的 lon/lat 相关:它们必须在 -90 ... +90 范围内

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = new mapboxgl.Map(
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
);

var data = '"orig_lat": "33.493100", "orig_lon": "117.131700", "dest_lat": "32.454500", "dest_lon": "99.738100"';

data = JSON.parse(data);

var lon = (Math.abs(parseFloat(data["dest_lon"])) > 90) ? '90' : data["dest_lon"];
var lat = (Math.abs(parseFloat(data["dest_lon"])) > 90) ? '90' : data["dest_lat"];

var marker = new mapboxgl.Marker()
        .setLngLat([data["dest_lat"], data["dest_lon"]])
        .addTo(map);
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />


<div id='map' style='width: 400px; height: 300px;'></div>

【讨论】:

感谢您回答我的问题,并再次感谢您期待并回答我的下一个问题 @amchugh89 很高兴为您提供帮助

以上是关于json post后在javascript中从python访问值的主要内容,如果未能解决你的问题,请参考以下文章

如何在javascript中从json文件中读取数据

在javascript中从控制器MVC获取json

使用来自网站 API 的 POST 请求获取 Json 数据 [重复]

如何在javascript中从内部JSON数组创建具有一些属性的数组

运行 CGI Python Javascript 以检索 JSON 对象

在Django中从POST接收数据后发送电子邮件[重复]