我對JSON和ajax很新穎,不知道如何從我的請求中獲取JSON數據?從ajax請求獲取json數據
目前我有兩種形式。一個用於搜索(地址),另一個用於驗證搜索表單中的數據。
我從第一種形式(地址搜索)的JSON格式的openstreetmap提名中獲取數據,並且希望將第二種形式的搜索數據用於驗證地址。但我不知道,如何訪問JSON數據,將它們放入第二種形式?
這裏是我的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: '© <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?傳單搜索插件讓我困惑。
的可能的複製[訪問JSON數據(https://stackoverflow.com/questions/6706374/accessing-json-data) – 31piy
我不知道,我可以從哪個變量,屬性或函數獲取json? – c00L