Sende form variabler til php og tilbake

7. november 2012

Okey. Jeg har et et vanlig html input som tar i mot tekst i et html-dokument. Jeg vil sende den som en variabel til et eksternt php-ark som prosesserer denne variabelen, og sender tilbake en annen variabel som jeg skal bruke til noe annet. Php-arket ligger (og må ligge) på et annet domene, og derfor har jeg skjønt at jeg må bruke json med en callback function for å kunne gjøre dette. Men jeg sliter med å forstå hvordan dette vil se ut. Kan noen hjelpe meg?

ma10as

990 198

11. november 2012

Litt sent svar her - så ikke tråden før nå.
Bruk datatype 'jsonp' når du sender en request via AJAX. Da legges det til et callback i URL-en, som du også nevner. Det er viktig at PHP-scriptet fanger opp denne callbacken og returnerer JSON-dataen inni dette.

Kode

<?php
$input = isset($_POST['input']) ? $_POST['input'] : false;
$callback = isset($_GET['callback']) ? $_GET['callback'] : false;

if ($input) {
	
	// Gjør noe med $input her
	
	$json_array = array('status' => 'ok', 'key' => 'value...');
	
	header('Content-Type: application/json');
	
	if ($callback) echo $callback . '(';
	echo json_encode($json_array);
	if ($callback) echo ')';
}
?>

jQuery-koden for å sende data og vente på svar kan f. eks se slik ut:

Kode

$('form').submit(function(e){
	
	e.preventDefault();
	
	var data = $(this).find('input[type=text]').eq(0);
	
	$.ajax({
		type: 'POST',
		dataType: 'jsonp',
		url: 'some.php?callback=?',
		data: { input: data }
	})
	.done(function(response) {
		console.log(response);
	});
});

Ingen av kodene over er testet, men de bør fungere

G33K3R

Trådstarter

50 5

12. november 2012

Dette var blandt de bedre svarene jeg har fått

Men det fungerer fremdeles ikke. Den står bare å loader, og til slutt timer den ut. Etter at jeg har gjort noe med input, og for eksempel sitter igjen med en variabel kalt $myVar. Hvor er det denne sendes tilbake. Skal jeg bytte ut key, value med noe?

ma10as

990 198

12. november 2012

Koden krever litt modifikasjon for å fungere for deg, siden jeg ikke vet hvordan din markup ser ut. Key og value er bare noe jeg returnerer tilbake til klienten. Bytt det ut med det du måtte ønske.

Om du poster det du har av relevant kode er det enklere å hjelpe deg

G33K3R

Trådstarter

50 5

12. november 2012

Skjønte at det måtte byttes ut litt ja...

Men siden jeg aldri har vært borte i ajax, jsonp og ikke særlig mye javascript heller, så ble det vanskelig :P Men her er ihvertfall php-koden min (fjernet litt av midten. Det er ikke så viktig):

Kode

$input = isset($_POST['input']) ? $_POST['input'] : false; 
$callback = isset($_GET['callback']) ? $_GET['callback'] : false; 

if ($input) { 
 
	//Create url
	$encodedsearch = urlencode('$input');
	
(.. Masse stuff her ..)

	$image_finished_src .= "http://" . $substr;


     
    $json_array = array('status' => 'ok', 'key' => 'value...'); 
     
    header('Content-Type: application/json'); 
     
    if ($callback) echo $callback . '('; 
    echo json_encode($json_array); 
    if ($callback) echo ')'; 
} 

?>

Det er altså $image_finished_src jeg vil sende tilbake. Hvordan vil key, value se ut da? Kan også legge med htmlen min (dette er i <body>):

HTML-kode

<form>
	<input type="text" name="input">
	<input type="submit">
</form>

<script>
$('form').submit(function(e){
	
	e.preventDefault();
	
	var data = $(this).find('input[type=text]').eq(0);
	
	$.ajax({
		type: 'POST',
		dataType: 'jsonp',
		url: 'testing.php?callback=?',
		data: { input: data }
	})
	.done(function(response) {
		console.log(response);
	});
});
</script>

Skal spørsmåltegnet i callback=? byttes ut med noe?

ma10as

990 198

12. november 2012

Har endret litt på koden. Siden du kun sender èn verdi til server så endret jeg til en GET-request, fremfor POST.

Kode

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
	$('form').submit(function(e){
		e.preventDefault();
		
		var text = $(this).find('input[type=text]').eq(0).val();
		
		$.getJSON('test.php?jsoncallback=?', {input:text}, function(response){
			
			console.log(response);
			
			if (response.error) {
				alert(response.error);
			}
			else {
				alert(response.image_src);
			}
		});
	});
});
</script>

<form>
	<input type="text" name="input">
	<input type="submit">
</form>

Kode

<?php
$input = isset($_GET['input']) ? $_GET['input'] : false;    

if ($input) {
	
	//Create url 
    $encodedsearch = urlencode($input);
    
    // (...)
    $substr = '';
    
    $image_finished_src = "http://" . $substr; 
    
    returnArray(array('image_src' => $image_finished_src));
}
else {
	returnArray(array('error' => 'no input'));
}

function returnArray($array) {
	
	header('Content-Type: application/json');
	
	$callback = isset($_GET['jsoncallback']) ? $_GET['jsoncallback'] : false;
	
	if ($callback) echo $callback . '(';  
    echo json_encode($array);  
    if ($callback) echo ')';
}
?>

G33K3R

Trådstarter

50 5

13. november 2012

Det funka dritbra! Thank you!