question about ajax show individual results

Question

question about ajax show individual results

Navigation

#1 by (0 votes)
#2 by (0 votes)

-1

I want to show the result of an AJAX query in different parts of my website. That is, in my query I have two echo within the PHP that I want to print in my HTML document.

The problem is that he shows them both together. For example:

NOMBRE:   //aqui que me muestre el nombre de mi variable nombre en php
EDAD:     //aqui que me muestre la edad de mi variable edad en php

but at the time of making the query, he gives me the following example:

NOMBRE:andy 18 //nombre y edad juntos
EDAD:andy 18 //nombre y edad juntos

Here is an example of the code:

$(document).ready(function () {     
  $(".info").click(function(e){
    var nombre=$("#nombre").val();
    var edad=$("#edad").val();

    $("#formulario").submit(function(e){
      e.preventDefault();

      $.ajax({
        url:"info.php",
        type:"POST",
        dataType: 'json',
        data:${nombre:nombre,edad:edad},
        beforesend:function(){
          $("#resultados").html("<img src='img/loading.gif'>");
        },
        success:function(data){
          $("#resultados1").html(data); //aqui un div para mostrar el nombre
          $("#resultados2").html(data);//aqui un div para mostrar la edad
        }
      });
    });
  }); 
});

PHP Code:

<?php
  //esto viene de dos input
  $nombre=$_POST['nombre'];
  $edad=$_POST['edad'];

  echo $nombre;
  echo $edad;

?>

javascript jquery ajax

asked by andy gibbs 25.03.2018 в 09:18

source

2 answers

0

If you need the name to be separated from the age you can add a BR after printing the name

echo $nombre;
echo '<br />';
echo $edad;

Otherwise, as you are printing on 2 different divs with css you can make one under the other, but this would be another issue.

answered by 25.03.2018 в 19:15

How to access a global variable from a fragment? How to save an url image in internal storage in Kotlin?

score 0 · Accepted Answer

I'll tell you with this example how you should do it:

In this HTML I enter 2 values which I want to show in 2 div separately

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<form method="POST" id="datos">
    <input type="text" name="valor1"  />
    <input type="text" name="valor2" />
    <input type="button" id="muestra_datos" value="Muestrame" />
</form>

<div id="resultado"></div><!--aquí se va a mostrar mi primer valor-->
<div id="resultado1"></div></div><!--aquí se va a mostrar mi segundo valor-->

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="funciones.js"></script>
</body>
</html>

In the PHP file that processes them, I put the values inside an associative array which I associate with a key in the form of text that I will use to recover them later

<?php   
$numero1 = $_POST['valor1'];
$numero2 = $_POST['valor2'];

header("Content-Type: application/json");

echo json_encode(array("valor1" => $valor1, "valor2" => $valor2));

Finally, in my AJAX file, I access the individual value with the data object that I want to show by means of the key that I mentioned above.

$(function(){
  $('#muestra_datos').click(function(){
    $.ajax({
      url: 'datos.php',
      type: 'POST',
      dataType: 'json',
      data: $('#datos').serialize(),
      success: function(data){
        $('#resultado').html(data['valor1'])
        $('#resultado1').html(data['valor2'])
      }
    })
  })
})