Ajax jquery omzetten naar json

Door Onbekende gebruiker op 05-04-2018 09:30 gewijzigd op 05-04-2018 10:20

2.971 views

Kan iemand mij helpen met ajax jquery omzetten naar json? Ik heb zelf niet zoveel ervaring mee en wil leren.
Zelf heb ik ajax jquery code al geschreven alleen weet niet hoe ik het kan omzetten naar json.

Dit is mijn code index.tpl.php:


<!DOCTYPE html>
<html>
<body>
<center><h2>Formulier</h2>

<form method="post" action="/leren">

 Email: 
 <input type="text" id="email" name="email" class="resend-tickets-input"></p>
  <br>
  
 Ordernummer: 
 <input type="text" id="order-hash" name="order-hash" class="resend-tickets-input"></p>
  <br><br>
</form>
    <button type="submit" class="green-button icon-button">
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="#000000" d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
        </svg>
        Verzenden
    </button>
 </center>
<script>
$(document).ready(function(){

	console.log("eey");

    $("button").click(function(){
        $.ajax({
			type:'POST',
			url: '/leren',
            dataType:'json',
			data:{"email": $('#email').val() , "order-hash": $('#order-hash').val(),},   
			success: function(data){
				alert(data);

        }});
    });
	
});
</script>
</body>
</html>

Mijn controller index.ctr.php:


<?php
if (isset($_POST['email'])){
	
	$gegevens = $_POST['email'] .'  '. $_POST['order-hash'];

   echo $gegevens;
   exit;
}
?>

Ariën

05-04-2018 09:59 gewijzigd op 05-04-2018 10:04

Je wilt je uitvoer omzetten naar JSON, zal je bedoelen

Kijk eens naar: [php]json_encode[/php] en GetJson

Onbekende gebruiker

05-04-2018 10:12 gewijzigd op 05-04-2018 13:14

Ik loop nu vast mijn alert werkt niet zie object object staan kan iemand me helpen?

Dit is mijn index.tpl.php:

<!DOCTYPE html>
<html>
<body>
<center><h2>Formulier</h2>

<form method="post" action="/leren">

Email:
<input type="text" id="email" name="email" class="resend-tickets-input"></p>
<br>

Ordernummer:
<input type="text" id="order-hash" name="order-hash" class="resend-tickets-input"></p>
<br><br>
</form>
<button type="submit" class="green-button icon-button">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
</svg>
Verzenden
</button>
</center>
<script>
$(document).ready(function(){

$("button").click(function(){
$.ajax({
type:'POST',
url: '/leren',
dataType:'json',
data:{"email": $('#email').val() , "order-hash": $('#order-hash').val(),},
success: function(data){
alert(data);
console.debug(data)
}});
});

});
</script>
</body>
</html>

Mijn controller index.ctr.php:
<?php
if (isset($_POST['email'])){

$gegevens = array(
"email" => $_POST['email'],
"order-hash" => $_POST['order-hash'],
);

echo json_encode($gegevens);
exit;
}
?>

Jeffrey van Rossum

05-04-2018 13:14

Hoi Yunus,

Waarom gebruik je geen console.log(data) i.p.v. alert(data)? Een alert kan niet zomaar een object weergeven, dus eigenlijk is de output die je nu krijgt correct.

Als je perse alert wilt gebruiken kun je misschien data omzetten naar een string.

var response = JSON.stringify(data);

alert(response);

Ariën

05-04-2018 13:16

Zou je jouw code tussen code-tags kunnen plaatsen?

Onbekende gebruiker

05-04-2018 13:35 gewijzigd op 05-04-2018 13:38

Dit is index.tpl.php

<?
<!DOCTYPE html>
<html>
<body>
<center><h2>Formulier</h2>

<form method="post" action="/leren">

Email:
<input type="text" id="email" name="email" class="resend-tickets-input"></p>
<br>

Ordernummer:
<input type="text" id="order-hash" name="order-hash" class="resend-tickets-input"></p>
<br><br>
</form>
<button type="submit" class="green-button icon-button">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
</svg>
Verzenden
</button>
</center>
<script>
$(document).ready(function(){

$("button").click(function(){
$.ajax({

type:'POST',
url: '/leren',
dataType:'json',
data:{"email": $('#email').val() , "order-hash": $('#order-hash').val(),},
success: function(data){
alert(data);
}});
});

});
</script>
</body>
</html>

?>

En dit is index.ctrl.php (controller):

<?
if (isset($_POST['email'])){

$gegevens = array("email" => $_POST['email'], "order-hash" => $_POST['order-hash'],);

echo json_encode($gegevens);
exit;
}
?>

Ariën

05-04-2018 13:50

Al naar JSON.stringify gekeken?

Onbekende gebruiker

05-04-2018 14:03

Mijn controller is goed alleen denk ik dat er iets mis is bij alert regel ik snap het verder niet
<?
<!DOCTYPE html>
<html>
<body>
<center><h2>Formulier</h2>

<form method="post" action="/leren">

Email:
<input type="text" id="email" name="email" class="resend-tickets-input"></p>
<br>

Ordernummer:
<input type="text" id="order-hash" name="order-hash" class="resend-tickets-input"></p>
<br><br>
</form>
<button type="submit" class="green-button icon-button">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
</svg>
Verzenden
</button>
</center>
<script>
$(document).ready(function(){

$("button").click(function(){
$.ajax({
type:'POST',
url: '/leren',
dataType:'json',
data:{"email": $('#email').val() , "order-hash": $('#order-hash').val(),},
success: function(data){
alert(data);
console.log(data);
}});
});

});
</script>
</body>
</html>
?>

controller:

<?
if (isset($_POST['email'])){

$gegevens = array("email" => $_POST['email'], "order-hash" => $_POST['order-hash'],);

echo json_encode($gegevens);
exit;
}
?>

Ariën

05-04-2018 14:05

Kijk eens naar Jeffreys bericht.

Onbekende gebruiker

05-04-2018 14:14 gewijzigd op 05-04-2018 14:18

Het werkt nu bedankt jeffrey en ariën! je ziet geen object object meer.
Maar er moet alleen email en ordernummer te voorschijn komen. dit zie ik nu in alert {"email":"test@test","order-hash":"ggghg"} en het moet alleen test@test ggghg zijn

<?
<!DOCTYPE html>
<html>
<body>
<center><h2>Formulier</h2>

<form method="post" action="/leren">

Email:
<input type="text" id="email" name="email" class="resend-tickets-input"></p>
<br>

Ordernummer:
<input type="text" id="order-hash" name="order-hash" class="resend-tickets-input"></p>
<br><br>
</form>
<button type="submit" class="green-button icon-button">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
</svg>
Verzenden
</button>
</center>
<script>
$(document).ready(function(){

$("button").click(function(){
$.ajax({
type:'POST',
url: '/leren',
dataType:'json',
data:{"email": $('#email').val() , "order-hash": $('#order-hash').val(),},
success: function(data){
var gegevens = JSON.stringify(data);

alert(gegevens);
console.log(data);
}});
});

});
</script>
</body>
</html>

?>

[size=xsmall]Toevoeging op 05/04/2018 14:32:26:[/size]

met alert(data.email) heb ik alleen email gekregen ik moet nu ordernummer doen

[size=xsmall]Toevoeging op 05/04/2018 14:34:58:[/size]

<?
<script>
$(document).ready(function(){

$("button").click(function(){
$.ajax({
type:'POST',
url: '/leren',
dataType:'json',
data:{"email": $('#email').val() , "order-hash": $('#order-hash').val(),},
success: function(data){

alert(data.email);
console.log(data);
}});
});

});
</script>
?>

Ariën

05-04-2018 14:40

Order-hash bedoel je? Dat kan gewoon op de zelfde wijze.

Reageren

Inloggen om te reageren