как создать кнопку, чтобы узнать яваскрипт функции, но страница не может быть обновлена ​​

Question

function showFeature(geojson, style){ 
 
\t \t \t currentFeature_or_Features = new GeoJSON(geojson, style || null); 
 
\t \t \t if (currentFeature_or_Features.type && currentFeature_or_Features.type == "Error"){ 
 
\t \t \t \t document.getElementById("put_geojson_string_here").value = currentFeature_or_Features.message; 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t if (currentFeature_or_Features.length){ 
 
\t \t \t \t for (var i = 0; i < currentFeature_or_Features.length; i++){ 
 
\t \t \t \t \t if(currentFeature_or_Features[i].length){ 
 
\t \t \t \t \t \t for(var j = 0; j < currentFeature_or_Features[i].length; j++){ 
 
\t \t \t \t \t \t \t currentFeature_or_Features[i][j].setMap(map); 
 
\t \t \t \t \t \t \t if(currentFeature_or_Features[i][j].geojsonProperties) { 
 
\t \t \t \t \t \t \t \t setInfoWindow(currentFeature_or_Features[i][j]); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t currentFeature_or_Features[i].setMap(map); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if (currentFeature_or_Features[i].geojsonProperties) { 
 
\t \t \t \t \t \t setInfoWindow(currentFeature_or_Features[i]); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }else{ 
 
\t \t \t \t currentFeature_or_Features.setMap(map) 
 
\t \t \t \t if (currentFeature_or_Features.geojsonProperties) { 
 
\t \t \t \t \t setInfoWindow(currentFeature_or_Features); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t document.getElementById("put_geojson_string_here").value = JSON.stringify(geojson); 
 
\t \t }

Я разрабатываю приложение, которое может показать точку на карте с помощью Google Maps API и PHP, но я имел кнопку, если вы клика для поиска обновленной страницы, я бы, если бы я искал точку (var geojson_parce), страница показывала результат (showFeature (geojson_parce, adressStyle), но не обновлялась (в турнире). пожалуйста, если у вас есть решение, помогите мне

<?php 
 

 
$host = "localhost"; 
 
$user = "postgres"; 
 
$password = "20152016"; 
 
$db = "Projet"; 
 

 
$con = pg_connect("host=$host dbname=$db user=$user password=$password") 
 
    or die ("Could not connect to server\n"); 
 
?> \t 
 
<h4>Afficher par nom:</h4> 
 
<form> 
 
<input type="text" name="term" /><br /> 
 
<input type="submit" Onclick="showFeature(geojson_parce,adressStyle);"></input> 
 
</form> 
 
<?php 
 
if (!empty($_REQUEST['term'])) { 
 

 
$term = pg_escape_string($_REQUEST['term']);  
 

 
$sql = "SELECT row_to_json(fc) 
 
FROM (SELECT 'FeatureCollection' As type, array_to_json(array_agg(f)) As features 
 
FROM (SELECT 'Feature' As type 
 
    , ST_AsGeoJSON(lg.geometry)::json As geometry 
 
    , row_to_json(lp) As properties 
 
    FROM poi As lg 
 
     INNER JOIN (SELECT id, description FROM poi WHERE nom LIKE '%".$term."%') As lp 
 
     ON lg.id = lp.id ) As f) As fc;"; 
 
$result = pg_query($con, $sql); 
 
while ($row = pg_fetch_assoc($result)) 
 
{ 
 
    foreach($row as $rslt); 
 
?> 
 
\t \t var geojson_barrage=<?php 
 
     echo $rslt; 
 
\t \t 
 
} }?>;

Answer 1

Чтобы добиться того, что вы хотите сделать (получить информацию из БД, чтобы показать маркеры на карте, без перезагрузки страницы), вам необходимо будет перестроить свой код и использовать Ajax.

В настоящее время в представлении формы будет задана переменная $term, которая затем используется в запросе sql, но, очевидно, это отрицательный побочный эффект перезагрузки страницы.

Лучший способ добиться того, что вы хотите сделать, - отправить запрос POST через Ajax на ваш скрипт, который отправит ответ json обратно в вашу функцию javascript - и НЕ перезагрузите страницу, поскольку она асинхронна.

Следующие фрагменты кода не проверяются, но они должны дать вам представление о том, что я имею в виду.

/* 
    At the top of your php page, this php code will get the data 
    from the database when it receives a POST request: 
*/ 

<?php 
    $host = "localhost"; 
    $user = "postgres"; 
    $password = "20152016"; 
    $db = "Projet"; 

    $con = pg_connect("host=$host dbname=$db user=$user password=$password") or die ("Could not connect to server\n"); 


    if($_SERVER['REQUEST_METHOD']=='POST'){ 
     /* get the POSTed variables from your ajax call and query the database */ 

     @ob_clean(); 

     $term = isset($_POST['term']) && !empty($_POST['term']) ? $_POST['term'] : false; 
     if(!$term) exit(json_encode(array('error'=>'Search term was empty'))); 

     $sql = "select row_to_json(fc) 
       from (select 'featurecollection' as type, array_to_json(array_agg(f)) as features 
       from (select 'feature' as type, st_asgeojson(lg.geometry)::json as geometry, row_to_json(lp) as properties 
       from poi as lg inner join (select id, description from poi where nom like '%".$term."%') as lp 
       on lg.id = lp.id ) as f) as fc;"; 

       /* Query db */ 
       $result = pg_query($con, $sql); 

       /* Process the recordset and construct your data response */ 

       /* 
        send json data: it is this data that YOUR showFeature 
        function uses. It equates to "http.responseText" 
        in the ajax function 
       */ 
       header("Content-Type: application/json; charset=UTF-8",true); 
       echo $data; 
     exit(); 
    } 

    /* Any other code below ... */ 
?> 

В разделе HEAD, где ваш браузер:

<script> 
     /* How/where is this set? */ 
     var adressStyle; 


     function showFeature(geojson, style){ 
      var node=document.getElementById("put_geojson_string_here"); 
      var cff = new GeoJSON(geojson, style || null); 

      if (cff.type && cff.type == "Error"){ 
       node.value = cff.message; 
       return; 
      } 
      if(cff.length){ 
       for(var i = 0; i < cff.length; i++){ 
        if(cff[i].length){ 
         for(var j = 0; j < cff[i].length; j++){ 
          cff[i][j].setMap(map); 
          if(cff[i][j].geojsonProperties) setInfoWindow(cff[i][j]); 
         } 
        } else{ 
         cff[i].setMap(map); 
        } 
        if(cff[i].geojsonProperties) setInfoWindow(cff[i]); 
       } 
      } else { 
       cff.setMap(map) 
       if(cff.geojsonProperties) setInfoWindow(cff); 
      } 
      node.value = JSON.stringify(geojson); 
     } 

     function getdata(){ 
      /* ajax */ 
      var http=new XMLHttpRequest(); 
      var headers={ 
       'Accept':"text/html, application/xml, application/json, text/javascript, "+"*"+"/"+"*"+"; charset=utf-8", 
       'Content-type':'application/x-www-form-urlencoded', 
       'X-Requested-With':'XMLHttpRequest' 
      }; 

      /* Assign a callback listener for when the data is received */ 
      http.onreadystatechange=function(){ 
       if(http.readyState==4 && http.status==200) showFeature.call(this, http.responseText, adressStyle); 
      } 

      /* Open the POST request */ 
      http.open('POST', document.location.href, true); 

      /* Send some headers - Content-Type is important */ 
      for(header in headers) http.setRequestHeader(header, headers[ header ]); 

      /* Actually send the request variables */ 
      http.send('term='+document.getElementById('term').value); 
     } 
    </script> 

И HTML-формы

<form> 
    <input type="text" id='term' name="term" /><br /> 
    <input type="button" onclick="getdata();" value='Submit query' />  
</form> 

Итак, пользователь нажимает на кнопку (которая не присылают форму в традиционный смысл), который отправляет запрос AJAX POST на ту же страницу - запрос обрабатывается кодом PHP выше (он запускается только в том случае, если запрос является POST-запросом, хотя вы можете захотеть для добавления к нему других условий), а код PHP запрашивает базу данных, обрабатывает набор записей и отсылает обратно данные json, которые используются для добавления маркеров на карту. Ваша исходная функция javascript showFeature действует теперь как callback для запроса ajax, но, поскольку он не был указан в вашем вопросе, я не знаю, как это работает или что именно он делает.

Answer 2

Написать функцию showFeature() как это:

function showFeature(event,geojson_parce,adressStyle){ 
    event.preventDefault(); 
    //...do rest of function 
} 

и вызов будет

onclick = "showFeature(event,geojson_parce,adressStyle)"

Вызов preventDefault() на event объекта предотвратит страницу с освежающим при нажатии кнопки отправить ,

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 3

Страница получает обновление из-за кнопки отправки для. Чтобы предотвратить загрузку страницы, вам необходимо отменить отправку в форме.Вы можете достичь этого следующими способами,

1. <input type="button" onclick="showFeature(geojson_parce,adressStyle);">Search</input>

2. В конце этой функции showFeature просто добавить.

   return false; 
   

3. или, как показано ниже, а

   <input type="button" onclick="showFeature(geojson_parce,adressStyle); return false;">Search</input>

Надеется, что это помогает вам.