3.前端点击按钮，把js获得的数据传给后端。

比如在前端点击一个按钮，通过js获得经纬度，把数值显示到下面这个div里面，并把数值传给后端。这个也是局部刷新，不跳到新页面。

html代码：

<button id="bt"  onclick=getLocation()> 按钮</button>
<div id="myposition" ></div>

js代码：

function getLocation()
  {
      var mypt=document.getElementById("myposition");
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{mypt.innerHTML="该浏览器不支持获取地理位置。";}
  }

function showPosition(position)
  {
      var mypt=document.getElementById("myposition");
      mypt.innerHTML="纬度: " + position.coords.latitude +
                    "<br>经度: " + position.coords.longitude;


      var lldata={
            "jingdu": position.coords.longitude,
            "weidu" : position.coords.latitude
            };
        $.ajax({
                    url: '/sign_in',     #传到的目的url
                    type: 'POST',
                    dataType: 'json',    
                    data:JSON.stringify(lldata) ,
                    contentType:'application/json',
                    success:function () {
                        alert("成功！");
                    },
                    error:function () {
                        alert("失败！");
                    }
                })

  }

这里只是把数据传到后端，前端并没有接受返回数据，传送成功的话弹出“成功！”，否则弹出“失败！”

后端代码：

@app.route('/sign_in',  methods=['post'])
def sign_in():
    data = request.get_json(force=True)  # 获取json数据
    CurLongitude= data['jingdu']
    CurLatitude=  data['weidu']
    ***
    ***
    ***
    return json.dumps(data)

这就接收到了数据，可以在后端对数据进行操作，这里虽然把接收到的json数据（实际上是字典结构）给返回回去了，但前端并没有接收，影响不大。