2017-07-27 222 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