У меня есть запрос ajax к Bing Maps Api, откуда мне нужно взять одно значение (TravelDistance) и использовать его в моем скрипте JS, но я не могу найти способ сделать это.
С этим кодом мне нужно взять некоторую информацию из формы, а затем создать URL-адрес для отправки запроса в API Bing Maps, из которого мне нужно получить значение TravelDistance. После этого мне нужно создать различные if и другие правила, чтобы получить окончательную квоту на работу курьера. Вторая часть не проблема, но получить эту информацию из ответа я не могу сейчас.
Излишне говорить, что я новичок в Javascript
Вы можете посмотреть его здесь: https://www.postaxi.it/bing/index.php
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bing API distance calculator</title>
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
</head>
<body>
<!-- top -->
<!-- Form per avere i dati di partenza ed arrivo / mittente - destinatario -->
<div id="form_info">
<form id="info" action="/sent" method="post">
<ol>
<li>
<h2>Mittente e Partenza</h2>
<label class="fs-field-label fs-anim-upper" for="cs_p_mitt_nom"><p>Nome Mittente</p><p id=" obbligatorio"></p></label>
<input class="fs-anim-lower" type="text" id="cs_p_mitt_nom" placeholder="Mario Rossi" required>
<label class="fs-field-label fs-anim-upper" for="cs_p_mitt_tel"><p>Numero mittente</p><p id=" obbligatorio"></p></label>
<input class="fs-anim-lower" type="text" id="cs_p_mitt_tel" placeholder="+39 3214567890" required>
<label class="fs-field-label fs-anim-upper" for="cs_p_via"><p>Indirizzo</p><p id=" obbligatorio"></p></label>
<input class="fs-anim-lower" type="text" id="cs_p_via" placeholder="Via Vittorio Emanuele...." required>
</li>
<li>
<h2>Destinatario e Arrivo</h2>
<label class="fs-field-label fs-anim-upper" for="cs_a_des_nom"><p>Nome destinatario</p><p id=" obbligatorio"></p></label>
<input class="fs-anim-lower" type="text" id="cs_a_des_nom" placeholder="Mario Rossi" required>
<label class="fs-field-label fs-anim-upper" for="cs_a_des_tel"><p>Numero destinatario</p><p id=" obbligatorio"></p></label>
<input class="fs-anim-lower" type="text" id="cs_a_des_tel" placeholder="+39 3214567890" required>
<label class="fs-field-label fs-anim-upper" for="cs_a_via"><p>Indirizzo</p><p id=" obbligatorio"></p></label>
<input class="fs-anim-lower" type="text" id="cs_a_via" placeholder="Via Vittorio Emanuele...." required>
</li>
<li data-input-trigger>
<h2>Destinatario e Arrivo</h2>
<label class="fs-field-label fs-anim-upper" for="a1taglio" data-info="Per ogni tua esigenza"><p>Quale tipo di prodotto devi spedire? </p></label>
<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
<span><input id="cs_spa" type="radio" id="cs_sp" value="1"><label for="cs_spa" class="radio-conversion">Lettere</label></span>
<span><input id="cs_spb" type="radio" id="cs_sp" value="2"><label for="cs_spb" class="radio-social">Documenti</label></span>
<span><input id="cs_spc" type="radio" id="cs_sp" value="3"><label for="cs_spc" class="radio-mobile">Pacchi</label></span>
</div>
</li>
<li data-input-trigger>
<h2>Tempi di spedizione</h2>
<label class="fs-field-label fs-anim-upper" for="a1taglio" data-info="Per ogni tua esigenza"><p>Che fretta hai? </p></label>
<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
<span><input id="cs_ta" type="radio" id="cs_t" value="90"><label for="cs_ta" class="radio-conversion">90 min</label></span>
<span><input id="cs_tb" type="radio" id="cs_t" value="45"><label for="cs_tb" class="radio-social">45 min</label></span>
<span><input id="cs_tc" type="radio" id="cs_t" value="30"><label for="cs_tc" class="radio-mobile">30 min</label></span>
</div>
</li>
</ol>
<p>RESOCONTO: DA CSS</p>
</form>
<button type="submit" id="info_post">Calcola distanza</button>
</div>
<div id="output_js"> <h2>Il nome del mittente è: </h2> </div>
<div id="output_js2"> <h2>Prova: </h2> </div>
<div id="link"></div>
<div id="link2"></div>
<!-- integro script -->
<script src="/bing/scripts/bing.js"></script>
</body>
</html>
И JS:
// Grab info
$("#info_post").click(function(){
var mnome = $("#cs_p_mitt_nom").val();
var mtel = $("#cs_p_mitt_tel").val();
var mvia = $("#cs_p_via").val();
var dnome = $("#cs_a_des_nom").val();
var dtel = $("#cs_a_des_tel").val();
var dvia = $("#cs_a_via").val();
var geocodeRequest = 'https://dev.virtualearth.net/REST/V1/Routes/Driving?o=xml&wp.0=' + encodeURIComponent(mvia) + '&wp.1=' + encodeURIComponent(dvia) + '&key=AshMMJQ_bXYZvtBQcl-_Gd60JY-TgZA5dXu-DNnTbpeU7Cwil9GT2LuW_LqjW9PS';
$.ajax ({
url: geocodeRequest,
type: 'GET',
datatype: 'xml',
success: function resbing() {
// xmlDoc.getElementsByTagName(
if ( Response &&
Response.ResourceSets &&
Response.ResourceSets.ResourseSet &&
Response.ResourceSets.ResourseSet.Resources &&
Response.ResourceSets.ResourceSet.Resources.Route &&
Response.ResourseSets.ResourceSet.Resources.Route.TravelDistance) {
var dist = Response.ResourseSets.ResourceSet.Resources.Route.TravelDistance;
jQuery( "#link2" ).html( "<p> DISTANZA CALCOLATA </p> <p>" + dist + "</p>");
}
}
});
$( "<p>Test</p>" ).appendTo( "#output_js" );
jQuery( "#output_js2" ).html( "<p>Questa è una prova. Ora passo le variabili in h2</p><h2>" + mnome + "</h2><h2>" + mtel + "</h2><h2>" + mvia + "</h2><h2> </h2><h2>" + dnome + "</h2><h2>" + dtel + "</h2><h2>" + dvia + "</h2>");
jQuery( "#link2" ).html( "<p> DISTANZA CALCOLATA </p> <p>" + dist + "</p>");
jQuery( "#link" ).html( "<p> Link richiesta </p> <p>" + geocodeRequest + "</p>");
});
Можете ли вы мне чем-нибудь помочь? Спасибо