Forum PHP.pl > [JavaScript]+[AJAX]+[PHP] Jak przesłać dane z JS do PHP przy pomoxy AJAX'a

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]+[AJAX]+[PHP] Jak przesłać dane z JS do PHP przy pomoxy AJAX'a

sooper

19.01.2012, 16:09:01

Dzisiaj coś łatwego

Mamy 2 pliki:

1. HTML (index.html)

[HTML] pobierz, plaintext 
<html>
	<head>
		<title>Tytuł</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('input[type=submit]').click(function(){
					$.ajax({
						type:"POST",
						url:"test.php",
						dataType: "text",
						data: {'a':'b'},
						success: function(data){
							$('#wynik').text(data);
						},
						error: function(){
							alert('Jakiś błąd');
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<input type="submit" value="Wyslij" /><br />
		<div id="wynik"></div>
<a href="test.php">Link do php</a>
	</body>
</html>
[HTML] pobierz, plaintext

Drugi php (test.php)

[PHP] pobierz, plaintext 
<?php
if(isset($_POST["a"]))
{
echo "Działa";
}
 
 
echo "zzz";
?>
[PHP] pobierz, plaintext

Czy w taki sposób przesyła się dane z JS do PHP ?
Dlaczego po przejściu do test.php zmienna $_POST["a"] jest pusta ?
Po wciśnięciu submit w html wyświetla wszystko z PHP. Skrypt ma przesyłać dane z JS do PHP a tu chyba jest odwrotnie :/

zdemotywowany

19.01.2012, 16:12:01

http://www.w3schools.com/ajax/ajax_aspphp.asp

sooper

19.01.2012, 19:31:34

OK zrobiłem coś takiego:

HTML

[HTML] pobierz, plaintext 
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
 
 
<script type="text/javascript"><!--
$(document).ready(function() {
  $('#crs').submit(function() {
 
    var nm = $('#crs #nm').val();
 
    $.ajax({
      type: 'post',
      url: 'script.php',
      data: nm,
      beforeSend: function() {
 
        $('#resp').html('Loading...');
      },
      timeout: 10000,        
      error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); },
      success: function(response) { $('#resp').html(response); }
    });
 
    return false;      
  });
});
--></script>
 
</head>
<body>
<div id="resp"></div>
 
<form action="script.php" method="post" id="crs">
 
 Name: <input type="text" name="nm" id="nm" /><br />
 
 <input type="submit" value="submit" />
</form>
</body>
</html>
[HTML] pobierz, plaintext

PHP

[PHP] pobierz, plaintext 
<?php
 
if(isset($_POST['nm']) ) 
{
 
 $nm = $_POST['nm'];
 
 $rehtml = '<h4>Hy '. $nm. '</h4>';
 
}
else $rehtml = 'Invalid data';
 
echo $rehtml;        // output (return) the response
 
 
?>
[PHP] pobierz, plaintext

Problem w tym, że zamiast (<input type="text" name="nm" id="nm" /><br />) muszę mieć (<div id="nm">wartosc_wygenerowana_przez_js</div>)

zdemotywowany

19.01.2012, 19:45:37

Chcesz wyświetlić to w inpucie?

sooper

19.01.2012, 20:15:14

Nie.

1. Javascript generuje mi jakąś wartość np 2. [val = '2';]

2. Przy pomocy (document.getElementById('iddiv').innerHTML = val;) wartość pojawia się w divie.

3. Chciałbym za pomocą AJAXA przekazać to do php. Bo z poziomu php chyba nie można odczytać wygenerowanej wartości div'a

zdemotywowany

19.01.2012, 20:20:42

1. Po losowanie odsyłam do Google'a.
2. Drugie chyba wiesz jak.
3. Jest na tej stronce co dałem wszystko.
Następnie JS odczytuje (wystarczy skopiować tamten przykład i zmienić wartość zmiennej) i wyświetla w div'ie.

sooper

19.01.2012, 21:02:32

Cytat(zdemotywowany @ 19.01.2012, 20:20:42 )

Może nieprecyzyjnie się wyraziłem, ale mam zrobione 'losowanie', wiem jak wynik wstawić do diva, ale nie wiem jak jego wartość przesłać do php przy pomocy submit.

Mam formularz:

[HTML] pobierz, plaintext 
<form action="script.php" method="post" id="crs">
 
<input type="text" name="nm" id="nm" />
<input type="text" pass="ps" id="ps" />
 
<div name="di" id="di">{WARTOŚĆ WSTAWIONA PRZEZ JS}</div>
 
<input type="submit" value="submit" />
[HTML] pobierz, plaintext

Wartości z inputów są oczywiście wysyłane, a z diva niestety nie.

Byłem na stronce, którą podałeś i są tam przykłady zapytań do php przy pomocy ajaxa, a mi nie oto chodzi, tylko jak wysłać submitem wartość z diva do php

zdemotywowany

19.01.2012, 21:04:52

Tam nie może być submit a button to po pierwsze.
Po drugie korzystasz z funkcje getElementByID i wyciągasz dane z div'a. I w końcu na tej stronce masz jak je wysłać. I teraz już te przykłady na pewno będą pomocne.

EDIT: Jeszcze raz przeczytałem Twój post i nie wiem czy chcesz je wysłać AJAX'em czy nie. Mógłbyś się zdecydować.

sooper

19.01.2012, 22:07:00

To może napiszę do czego dążę, będzie chyba prościej dojść, jakiej metody lepiej użyć.

Załóżmy że mam formularz logowania, taki jak jest na tym forum.
Składa się on z 2 inputów ( Nazwa oraz hasło użytkownika)

[PHP] pobierz, plaintext 
<input type="text" name="nazwa" id="nazwa" />
<input type="text" name="haslo" id="haslo"  />
[PHP] pobierz, plaintext

Chciałbym do tego formularza dodać diva, gdzie jego wartość będzie generowana przez JS (generowanie mam już zrobione)

[PHP] pobierz, plaintext 
<div name="test" id="test>{WARTOŚĆ Z JS}</div>
[PHP] pobierz, plaintext

i na końcu wysłać wszystko submitem

[PHP] pobierz, plaintext 
<input type="submit" value="submit" />
[PHP] pobierz, plaintext

Po stronie php wartości z inputów odczytamy za pomocą $_POST[]

Jak odczytać wartość DIVA

Mam nadzieje że teraz jest już jasne

d3ut3r

20.01.2012, 05:35:00

być może łatwiej zamiast DIV użyć po prostu:

[HTML] pobierz, plaintext 
<input type="hidden" name="cosik" value="wartosc_z_js" />
[HTML] pobierz, plaintext

wtedy po kliknięciu submit skrypt php prócz loginu i hasła będzie mógł odebrać również wartość zmiennej $_POST['cosik']

zdemotywowany

20.01.2012, 10:45:50

Cytat(sooper @ 19.01.2012, 22:07:00 )

Jak odczytać wartość DIVA

Temat mówi co innego... Z resztą Twoje posty też. Tak więc div'a nie prześlesz do php (albo może i prześlesz, ale się troszkę pomęczysz). Musisz tak jak kolega wyżej napisał wstawić to w inputa, którego nie będzie widać, a zostanie wysłany razem z formularzem.

sooper

20.01.2012, 11:41:08

Na chwilę obecną wysyłanie mam zrobione przez ukryty input, jednak taki input da się odkryć i zmienić jego wartość, dlatego myślałem od divie. Ogólnie doczytałem się, że właśnie ajaxem uda się wysłać wartości z js do php, dlatego pytałem jak to zrobić. Widocznie się nie zrozumieliśmy.

Gdyby jednak komuś przyszedł do głowy jakiś pomysł na wysłanie wartości przez diva lub za pomocą czegoś innego oprócz inputa, proszę pisać.

Kod

$(document).ready(function(){
$('input[type=submit]').click(function(){
$.ajax({
type:"POST",
url:"test.php",
dataType: "text",
data: {'a':'b'},
success: function(data){
$('#wynik').text(data);
},
error: function(){
alert('Jakiś błąd');
}
});
});
});

Dalej jednak nie wiem dlaczego ten skrypt nie działa. Wyraźnie jest napisane, że po akcji SUMBIT wartości powinny zostać wysłane i odczytane za pomocą $POST[]

zdemotywowany

20.01.2012, 11:47:38

Tak, AJAX'em możesz wysłać cały formularz bez przeładowania strony, div'a też możesz wysłać.

d3ut3r

21.01.2012, 01:36:32

Cytat

jednak taki input da się odkryć i zmienić jego wartość

również można zmodyfikować całe zapytanie dlatego to po stronie php robi się walidację danych ponieważ to co do skryptu php jest wysyłane user może dowolnie modyfikować i umieszczenie tekstu w div nie poprawi w żadnym stopniu bezpieczeństwa skryptu.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.