2017-07-27 170 views
-1

我对JSON和ajax很新颖,不知道如何从我的请求中获取JSON数据?从ajax请求获取json数据

目前我有两种形式。一个用于搜索(地址),另一个用于验证搜索表单中的数据。

我从第一种形式(地址搜索)的JSON格式的openstreetmap提名中获取数据,并且希望将第二种形式的搜索数据用于验证地址。但我不知道,如何访问JSON数据,将它们放入第二种形式?

这里是我的jsfiddle:

jsfiddle

搜索正在我的机器上,我猜,我做错了什么与Ajax请求的jsfiddle。

我的HTML:

<div class="col-md-8 col-md-offset-2 form-container"> 

<div id="map-adress"></div> 

<div class="panel panel-default marker-panel"> 
    <div class="panel-heading">Create a post(Marker)</div> 
    <div class="panel-body"> 
     <div class="col-md-8 col-md-offset-4"> 
      <p>Insert the adress of the marker position<br> 
       (You can move the marker on the map to the right position).</p> 
     </div> 

     <div class="form-group"> 
      <label for="findbox-adress" class="col-md-4 control-label find-label">Marker Location</label> 
      <div class="col-md-6"> 
       <div id="findbox-adress"></div> 
      </div> 

      <div class="col-md-2"> 
       <button type="submit" class="btn btn-primary user_marker_btn"> 
        Validate 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 

<div id="user_marker_adress" class="panel panel-default"> 
    <div class="panel-heading">Validate the marker adress</div> 
    <div class="panel-body"> 

     <form class="form-horizontal" method="POST" action="{{ route('userposts.create') }}"> 
      {{ csrf_field() }} 

      <div class="form-group"> 
       <label for="a_street" class="col-md-4 control-label">Street</label> 
       <div class="col-md-6"> 
        <input id="a_street" type="text" class="form-control" name="a_street" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_street_no" class="col-md-4 control-label">Street No.</label> 
       <div class="col-md-6"> 
        <input id="a_street_no" type="text" class="form-control" name="a_street_no" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_zip_code" class="col-md-4 control-label">Zip Code</label> 
       <div class="col-md-6"> 
        <input id="a_zip_code" type="text" class="form-control" name="a_zip_code" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_village" class="col-md-4 control-label">Village</label> 
       <div class="col-md-6"> 
        <input id="a_village" type="text" class="form-control" name="a_village" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_city" class="col-md-4 control-label">City</label> 
       <div class="col-md-6"> 
        <input id="a_city" type="text" class="form-control" name="a_city" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_state" class="col-md-4 control-label">State</label> 
       <div class="col-md-6"> 
        <input id="a_state" type="text" class="form-control" name="a_state" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_country" class="col-md-4 control-label">Country</label> 
       <div class="col-md-6"> 
        <input id="a_country" type="text" class="form-control" name="a_country" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-md-8 col-md-offset-4"> 
        <button type="reset" class="btn btn-danger"> 
         Clear 
        </button> 
        <button type="submit" class="btn btn-primary"> 
         Next 
        </button> 
       </div> 
      </div> 

     </form> 

    </div> 
</div> 

我的JavaScript/jQuery的:

$(document).ready(function(){ 

/************************************************************ 
Create Openstreetmap 
************************************************************/ 

var map = new L.Map('map-adress', {zoom: 2, center: new L.latLng([24.61, -34.63]) }); 
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
})); 


/************************************************************ 
Create leaflet-search plugin properties 
************************************************************/ 

var search = map.addControl(new L.Control.Search({ 
    container: 'findbox-adress', 
    url: 'http://nominatim.openstreetmap.org/search?format=json&addressdetails=1&q={s}', 
    jsonpParam: 'json_callback', 
    propertyName: 'display_name', 
    propertyLoc: ['lat','lon'], 
    marker: L.marker([0,0], {draggable:'true'}).addTo(map).on('click', getLatLon), 
    autoCollapse: false, 
    collapsed: false, 
    autoType: false, 
    minLength: 2, 
    autoResize: false, 
    zoom: 18 
    }) 
); 


$(".search-input").attr("Placeholder", "No., Street, city, zip code, State and country"); 

/* get Marker locataion(lat/lng) */ 
function getLatLon(e) { 
    alert(this.getLatLng()); 
} 


/************************************************************ 
Create User Marker(Adress) Form 
************************************************************/ 


$(".user_marker_btn").click(function(){ 
    var searchString = $("#searchtext9").val(); 

    var searchArray = searchString.split(', '); 

    console.log(searchArray); 

    var JSONArray = $.parseJSON(search); 
    console.log(JSONArray); 

    $("#a_street").val(searchArray[1]); 
    $("#a_street_no").val(searchArray[0]); 
    $("#a_zip_code").val(searchArray[5]); 
    $("#a_village").val(searchArray[2]); 
    $("#a_city").val(searchArray[3]); 
    $("#a_state").val(searchArray[4]); 
    $("#a_country").val(searchArray[6]); 

    $("#user_marker_adress").css("display", "block"); 
}); 

}); 

我怎样才能从请求访问JSON数据,把它们放在第二种形式?此刻,我用输入字段的值手动执行此操作。但是我遇到了一个问题,如果用户输入了地址,或者没有街道号码,那么我的脚本就会失败。

我不知道,我必须从哪个变量或函数中获取json?传单搜索插件让我困惑。

+0

的可能的复制[访问JSON数据(https://stackoverflow.com/questions/6706374/accessing-json-data) – 31piy

+0

我不知道,我可以从哪个变量,属性或函数获取json? – c00L

回答

0

使用Ajax请求

既然你是以下简单的Ajax代码片段应该帮助你在那种阿贾克斯初学者获得JSON格式的数据。 在jquery中编写下面的ajax代码。

$.ajax({ 
url:"/Enter url of your particular function/" 
type: "GET" //request type either GET or POST 
dataType: "json", //fetching the data in form of json 
success: function(data){ 
//Here you will get your data in json format. 
} 

现在,在您从中获取json数据的特定函数中,必须在最后包含以下行。

header('Content-type: application/json'); 
echo json_encode($variable); 

请参见下面的代码片段

public function convertDate($mydate) { 
    $dt = DateTime::createFromFormat("d-m-Y", $mydate); 
    $dtf = $dt->format("d-m-Y"); 
    header('Content-type: application/json'); 
    echo json_encode($dtf); 
} 
+0

你能给我一个提示,说明哪些元素/函数需要调用ajax请求?传单搜索插件让我困惑。 – c00L