Как отправить данные на стороне клиента на сервер - PullRequest
Новая
       8

Как отправить данные на стороне клиента на сервер

0 голосов
/ 16 февраля 2019

Я использую Geolocation API, встроенный в HTML5, но главная проблема заключается в том, что я хочу сохранить результат из геолокации Api в моей БД.Поэтому мой главный вопрос заключается в том, как я могу отправить эту информацию или результат в мой основной файл (на стороне сервера)?

Я создал пустую форму и через тег скрипта вставил два скрытых вводапометить и сохранить в нем мой результат, выбрав тег по идентификатору и просто изменив его значение на желаемый результат.Но я получаю пустую строку в моем бэкэнд-файле. 

// EJS FILE 

<body>

    <p>Click to  get your coordinates.</p>

    <form action="/" method="POST">
        <input type="hidden" name="lat"  id="lat" value="">
        <input type="hidden" name="long" id="long" value="">
        <input type="hidden" name="test" id="test"value="">
        <button type="submit" onclick="Onclick()">Try It</button>
    </form>

    <p id="demo"></p>

<script>

function Onclick(){

   var x = document.getElementById("lat"); 
   var y = document.getElementById("long");
   var z = document.getElementById("test");

    if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(function(position){
            console.log(position.coords); 
            x.value =  position.coords.latitude 
            y.value =  position.coords.longitude; 
           });
    } else 
           z.value = "Geolocation is not supported by this browser.";
}
</script>


(Please give me answer in JS only )

Я новичок в NodeJ, я много искал, прежде чем опубликовать этот вопрос, не получил требуемый ответ.Я действительно ценю ваше драгоценное время для решения этих запросов.

Когда я нажимаю кнопку и проверяю ее на стороне сервера, вместо того, чтобы получить желаемый результат, я получаю пустые значения, Пожалуйста, помогите мне в этой части !!

1 Ответ

0 голосов
/ 16 февраля 2019

getCurrentPosition является асинхронной функцией, это означает, что:

  1. Вы нажимаете кнопку
  2. Функция Onclick запускает
  3. Форма отправляет
  4. Функция обратного вызова, которая устанавливает значения формы, запускается (или могла бы, если бы вы не покинули страницу)

Вам следует избегать отправки формы до тех пор, пока данные не станут доступны.

  • Привязать обработчики событий с помощью addEventListener
  • Запретить поведение формы по умолчанию
  • Повторно отправить форму с JS, как только данные станут доступны 

// Bind the event listener here
var form = document.querySelector('form');
form.addEventListener("submit", submit_geo_coords);

// Add the event paramater to the function
function submit_geo_coords(event) {

  event.preventDefault(); // Stop normal submission of the form

  var x = document.getElementById("lat");
  var y = document.getElementById("long");
  var z = document.getElementById("test");

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log(position.coords);
      x.value = position.coords.latitude
      y.value = position.coords.longitude;
      form.submit(); // Resubmit the form when the data is available
    });
  } else
    z.value = "Geolocation is not supported by this browser.";
}
<p>Click to get your coordinates.</p>

<form action="/" method="POST">
  <input type="hidden" name="lat" id="lat" value="">
  <input type="hidden" name="long" id="long" value="">
  <input type="hidden" name="test" id="test" value="">
  <button type="submit">Try It</button>
</form>
...