Question

我正在实现一个简单的搜索应用程序，并且我正在使用django和yelp API作为我的后端，并且它的工作正常，我的问题是我试图用leaflet，js实现的前端（我不擅长）。在我的搜索应用程序中，我有一个带有输入标签的表单，用户可以在其中搜索餐馆或银行

<form id="search_fm" method="get" >
            <input type="text" id="q" name="q" />
            <input type="submit" id="Go" value="Search"  />
 </form>

对于要显示餐厅或银行的位置，我可以使用leaflet函数map.getCenter()

获取经纬度

我的问题是如何将latlng与我的表单动作结合在一起。如果我可以使用/search/?q=input_value&loc=latlng格式的请求，那么我可以在后端处理请求。

我试图用以下代码连接我的网址，但latlng没有追加

var frmSomething= $("#search_fm");
var btnSubmit= $("#Go");
btnSubmit.click(function()
  {
   txt_val = document.getElementById('q').value
   var mLat = map.getCenter().lat
   var mLng =  map.getCenter().lng
   var latlng = mLat +','+ mLng
   console.log(latlng)
   frmSomething.attr("action", "/search/?q=" + txt_val+"&loc="+latlng);
   btnSubmit.submit();
 });

任何建议

Answer 1

我不知道这是一个最佳解决方案，但是没有一个解决方案是好的。我要做的是在表单中添加一个隐藏的输入标签，当单击按钮时，latlng值将分配给输入标签，然后将其附加到表单操作中

<script>
    var btnSubmit= $("#btnSubmit");
        btnSubmit.click(function()
        {
         var mLat = map.getCenter().lat
         var mLng =  map.getCenter().lng
         var latlng = mLat +','+ mLng
         document.getElementById("loc").value = latlng
         btnSubmit.submit();
        });

</script>                   
<form action="/search/?q='+document.getElementById('q').value'+loc='+document.getElementById('loc')'" id= 'search_fm' method="get" >
  <input type="text" id="q" name="q" />
  <input type="hidden" id="loc" name="loc"/>
  <button id="btnSubmit" type="submit">Submit</button>
</form>

提交表单时连接URL

1 个答案: