2012-04-08 2 views
0

Je suis un peu novice en javascript, donc je suis à la recherche d'aide pour créer un moyen de glisser-déposer des marqueurs de géocodage, pour permettre des adresses changeantes interactives. Je crois que c'est possible en mettant à jour les lignes de colonne LOCATION.POST requête à UPDATE lignes

La première étape consiste à envoyer une requête POST, n'est-ce pas? Eh bien, je voudrais demander si quelqu'un peut me montrer un exemple, parce que je ne sais pas comment écrire et mettre cette requête POST dans mon code!

Répondre

2

Vous devez POST à ​​l'API Fusion Tables à jour une colonne, mais actuellement, vous ne pouvez pas le faire directement à partir de JavaScript en tant que Google does not set the CORS headers pour autoriser la publication interdomaine dans son API. Donc, si vous voulez faire cela, vous devez "relayer" votre demande via votre serveur web ou quelque chose de similaire. Je le fais avec le script PHP suivant, puis j'envoie la requête via JavaScript à mon script PHP. Et enfin, vous devez authenticate yourself using OAuth.

$url = "http://www.google.com/fusiontables/api/query"; 
$relay = new PostRelay($url,$_POST); 
echo $relay->relay(); 

Et en classe PostRelay est défini la méthode relay(), la $_POST détient toutes les données affichées (représentés par $this->data dans ma classe):

public function relay() 
{ 
    $url = $this->getUrl(); 
    $this->curlHandler = curl_init($url); 
    curl_setopt($this->curlHandler, CURLOPT_POST, true); 
    curl_setopt($this->curlHandler, CURLOPT_RETURNTRANSFER, true); 
    curl_setopt($this->curlHandler, CURLOPT_TIMEOUT, 30); 
    curl_setopt($this->curlHandler, CURLOPT_FOLLOWLOCATION, 1); 

    if($this->data != null) { 
     curl_setopt($this->curlHandler, CURLOPT_POSTFIELDS, $this->getData()); 
    } 

    $remote_answer = curl_exec($this->curlHandler); 

    if(curl_errno($this->curlHandler) != 0) { 
     $msgErrorNo = "cURL Errornumber: ".curl_errno($this->curlHandler); 
     $msgError = "cURL Error: ".curl_error($this->curlHandler); 
     throw new RemoteException($url,$msgErrorNo." ".$msgError); 
    } 
    return $remote_answer; 
} 
+0

Hey Stefan, pourriez-vous s'il vous plaît montrer comment cela peut être fait ici: –

+0

Que voulez-vous dire par "ici"? Je peux vous montrer comment utiliser mon extrait de code. – Odi

+0

Ok, je vois, vous voulez dire votre exemple de code ci-dessous. Cela fonctionne très bien pour afficher vos données. Maintenant, si vous souhaitez envoyer des données à Fusion Tables, vous devez utiliser un serveur Web intermédiaire, car Google n'autorise pas (encore?) La demande POST directe à partir de JavaScript sur leur API. Configurez mon script PHP dans votre serveur Web et envoyez la requête POST à ​​ce script. Dans jQuery, vous pouvez utiliser $ .post (url-to-php-script, fonction-succès) pour cela. – Odi

-1

Jetez un oeil à jQuery Ajax:

Exemple (en supposant un service Web .NET qui se trouve dans un dossier racine Web appelé Ajax):

var Params = "{'myParamName': 'myParamValue'}"; 

$.ajax({ 
     type: "POST", 
     url: "Ajax/MyWebService.asmx/MyWSMethod", 
     data: Params, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (response) { 
      // Handle the response here as you need to... 
     }, 
     failure: function() { 
      // Handle failure if needed 
     } 
    }); 
+0

Est-ce que vous appuyez sur Entrée trop tôt? – Ryan

+0

Yea - doit s'éloigner un moment –

0
<!DOCTYPE html> 
<html> 
<head> 
<style> 
#map_canvas { width: 600px;height: 550px; } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script> 
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 
var map; 

var layer; 
var tableid = 3385625; 

function initialize() { 
map = new google.maps.Map(document.getElementById('map_canvas'), { 
center: new google.maps.LatLng(-30.127460619520974, -51.167964935302734), 
zoom: 11, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

layer = new google.maps.FusionTablesLayer(tableid); 
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid); 
layer.setMap(map); 
} 
//FUNÇÃO PARA ATIVAR OS FILTROS 
function changeMap() { 
var searchString = document.getElementById('search-string').value.replace(/'/g, "\\'"); 
if (!searchString) { 
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid); 
return; 
} 
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid + " WHERE 'TIPO' = '" + searchString + "'"); 
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql='; 
var queryUrlTail = '&jsonCallback=?'; 
var query = "SELECT COUNT() FROM " + tableid + " WHERE 'TIPO' CONTAINS IGNORING CASE '" + searchString + "'" 
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail); 
var jqxhr = $.get(queryurl, 
function(data){ 
try{ 
$('#count').html((data.table.rows[0][0])); 
} 
catch(err){ 
$('#count').html('0') 
} 
}, 
"jsonp"); 
} 

</script> 

</head> 
<body onload="initialize();"> 

<div id="map_canvas"></div> 

<div style="margin-top: 10px;"> 
<label>Qual o tipo?</label> 
<select id="search-string" onchange="changeMap(this.value);"> 
<option value="">--Selecionar/Reset--</option> 
<option value="Bar">Bar</option> 
<option value="Comidas variadas">Comidas variadas</option> 
<option value="Espaço de Cultura">Espaço de Cultura</option> 
<option value="Hotel">Hotel</option> 
<option value="Igreja">Igreja</option> 
<option value="Museu">Museu</option> 
<option value="Restaurante">Restaurante</option> 
<option value="Shopping Center">Shopping Center</option> 
<option value="Teatro">Teatro</option> 
</select> 
</div> </br> 
<label>Quantidade:</label> 
<span id='count'></span> 
</body> 
</html>