从ajax请求获取json数据

时间:2017-07-27 05:24:09

标签: jquery json ajax leaflet openstreetmap

我是JSON和ajax的新手,并且不知道如何从我的请求中获取JSON数据?

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

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

这是我的jsfiddle:

jsfiddle

搜索正在我的机器上工作,我想,我在jsfiddle上做了一些错误的ajax请求。

我的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?传单搜索插件让我感到困惑。

1 个答案:

答案 0 :(得分:0)

使用ajax请求

以json格式获取数据

因为你是ajax的初学者,所以简单的ajax代码片段可以帮助你。 在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);
}