2012-04-08 7 views
0

Ich bin ein bisschen Neuling in Javascript, also suche ich nach etwas Hilfe, um eine Möglichkeit zum Ziehen und Ablegen von Geocoding-Markern zu erstellen, um interaktive Adressenwechsel zu ermöglichen. Ich glaube, dies ist möglich, indem Sie die Spalten der LOCATION-Spalte aktualisieren.POST-Anfrage zu UPDATE Zeilen

Der erste Schritt ist das Senden einer POST-Anfrage, richtig? Nun, ich würde gerne fragen, ob mir jemand ein Beispiel zeigen kann, weil ich keine Ahnung habe, wie ich schreiben und diese POST-Anfrage in meinen Code schreiben soll!

Antwort

2

Sie müssen Post an die Fusion Tables API eine Spalte, aber derzeit können Sie dies nicht direkt von JavaScript als Google does not set the CORS headers tun, um domainübergreifendes Posten in ihrer API zu ermöglichen.

Also, wenn Sie dies tun möchten, müssen Sie Ihre Anfrage über Ihren Webserver oder etwas ähnliches "weiterleiten". Ich mache es mit dem folgenden PHP-Skript, dann poste ich die Anfrage per JavaScript in mein PHP-Skript. Und schließlich müssen Sie authenticate yourself using OAuth.

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

Und in der Klasse PostRelay das Verfahren relay() definiert ist, hält die $_POST alle eingestellten Daten (dargestellt durch $this->data in meiner Klasse):

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, könntest du bitte zeigen, wie das hier gemacht werden könnte: –

+0

Was meinst du mit "hier"? Ich kann Ihnen zeigen, wie Sie mein Code-Snippet verwenden. – Odi

+0

Okay ich sehe, du meinst deinen Beispielcode unten. Dies funktioniert sehr gut zur Anzeige Ihrer Daten. Wenn Sie jetzt Daten an Fusion Tables senden möchten, müssen Sie einen Webserver dazwischen verwenden, da Google (noch?) Keine direkte POST-Anfrage von JavaScript an ihre API zulässt. Richten Sie mein PHP-Skript auf Ihrem Webserver ein und senden Sie die POST-Anfrage an dieses Skript. In jQuery können Sie dazu $ .post (URL-zu-PHP-Skript, Success-Funktion) verwenden. – Odi

-1

Werfen Sie einen Blick auf jQuery Ajax:

Beispiel (ein .NET Web-Service unter der Annahme, dass namens Ajax auf einem Web-Stammordner befindet):

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 
     } 
    }); 
zu aktualisieren
+0

Haben Sie treffen zu früh eingeben? – Ryan

+0

Yea - muss für einen Moment wegtreten –

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> 
Verwandte Themen