1

les comento tengo un pequeño problema, soy muy nuevo en PHP pero he logrado hacer un script muy sencillo que básicamente se conecta con una API para enviar mensajes (Texto y WhatsApp).

EL script funciona y envia los mensajes, sin embargo la respuesta de si fue enviado o no me la muestra en pantalla directamente en JSON.

Como puedo hacer para que al enviar el formulario la respuesta se muestre como texto debajo del formulario?

El código es este:

Formulario:

<form action="whatsapp.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8" id="form-app">
<fieldset class="row">

<!-- Heading -->
<div class="col-xs-12">
    <h3 class="legend">Envío de WhatsApp</h3>
</div>

<!-- Paragraph Text -->
<div class="col-xs-12">
    <p>Uso exclusivo personal de Soluciones Marva</p>
</div>

<!-- Select List -->
<div class="col-xs-12">
    <div class="form-group required-control">
        <label  class="control-label" for="type">Tipo</label>
        <select id="type" name="type" data-alias=""  class="form-control" required  >
            <option value="text" >Mensaje</option>
            <option value="file" >Archivo</option>
        </select>
    </div>
</div>

<!-- Number -->
<div class="col-xs-12">
    <div class="form-group required-control">
        <label  class="control-label" for="country_code">Código de país (Solo números)</label>
        <input type="number" id="country_code" name="country_code" value="52" data-alias="" data-integer-only="true"  class="form-control"  required>
    </div>
</div>

<!-- Number -->
<div class="col-xs-12">
    <div class="form-group required-control">
        <label  class="control-label" for="number">Número de teléfono (10 dígitos)</label>
        <input type="number" id="number" name="number" value="" data-alias="" data-integer-only="true"  class="form-control"  required>
    </div>
</div>

<!-- Text Area -->
<div class="col-xs-12">
    <div class="form-group">
        <label  class="control-label" for="message">Mensaje o URL de archivo a enviar</label>
        <textarea id="message" name="message" rows="10" data-alias="" class="form-control" maxlength="65536"></textarea>
    </div>
</div>

<!-- Button -->
<div class="col-xs-12">
     <div class="form-action">
        <button type="submit" id="button_1" name="button_1" class="btn btn-primary">Enviar</button>
    </div>
</div>
</fieldset>
<div class="" style="display:none"><label class="control-label" for="_email">Disculpe, pero deje este campo en blanco</label><input type="text" id="_email" class="form-control" name="_email"></div> </form>

Como ven principalmente el formulario solo envia pero no muestra la respuesta.

El archivo que realiza el envío

<?php
include_once "key.php";
$number=$_POST["number"];
$country_code=$_POST["country_code"];
$type=$_POST["type"];
$message=$_POST["message"];

$params = array(
  "instance_id" => $INSTANCE_ID,
  "type" => $type,
  "number" => $number,
  "country_code" => $country_code,
  "message" => $message
);
$headers = array(
  "apikey: ".$API_KEY
);
curl_setopt_array($ch = curl_init(), array(
  CURLOPT_URL => "https://api.plataformadeenvios.com.mx/whatsapp/send",
  CURLOPT_SSL_VERIFYPEER => 0,
  CURLOPT_HEADER => 0,
  CURLOPT_HTTPHEADER => $headers,
  CURLOPT_POST => 1,
  CURLOPT_POSTFIELDS => http_build_query($params),
  CURLOPT_RETURNTRANSFER => 1
));
$response = curl_exec($ch);
curl_close($ch);

echo json_encode($response);

Leí un articulo sobre que tengo que convertirlo en una cadena y posteriormente insertarlo en HTML, la cosa es que no tengo muy claro como se hace eso.

Respuesta en JSON

"{\"success\":true,\"message\":\"message sent\",\"status\":200,\"code\":\"whatsapp_21\",\"credit\":715}"

Respuesta sin codificar:

{"success":true,"message":"message sent","status":200,"code":"whatsapp_21","credit":714}
2
  • ¿Puedes mostrarnos el resultado que ves al final en formato json? Y tambien muestranos el resultado sin codificarlo en json, es decir, haz un echo $response y nos muestras que sale.
    – masterguru
    Commented el 17 dic. 2021 a las 19:04
  • @masterguru Al final de la entrada he agregado las respuestas como me lo solicitaste. Commented el 17 dic. 2021 a las 19:16

1 respuesta 1

3

Basándome en la salida sin codificar, te recomiendo que sustituyas el echo json_encode($response); por algo así:

$respuesta = json_decode($response);
if ($respuesta->success !== true or $respuesta->status !== 200) {
    echo '<h1>Error</h1><p>El mensaje no ha sido enviado. Comprobar mensaje de respuesta: <pre>'.$response.'</pre>';
    die();
} else {
    echo '<h1>Mensaje enviado correctamente</h1>';
}

Como puedes ver, es un ejemplo simple de lo que puedes hacer y como acceder a los distintos indices y valores recibidos. Puedes modificar lo que quieras y adaptarlo a tu gusto.

Doy por sentado que los valores de success y status son los que confirman que el mensaje ha sido enviado correctamente. Un estado de 200 en http normalmente significa que no hay error.

La clave está en convertir el json recibido (no hace falta que le pases el json_encode, ya lo recibes como json directamente) en este caso a un objeto, al cual puedes acceder facilmente como ves más arriba.

Puedes practicar cambios de este código en este enlace.

¿Cómo mostrar una respuesta JSON en mi formulario?

Deberás usar AJAX para ello y modificar un poco el arreglo anterior.

Usando jQuery seria algo así (debes pegar el código entre el </form> y el </body> en tu ejemplo:

<div id="respuesta"></div>
<script>
$(function(){
    $("#form-app").on("submit", function(e){
          
        // Cancelamos el envio directo
        e.preventDefault();
 
        // Obtenemos los datos del formulario 
        var f = $(this);
        var formData = new FormData(document.getElementById("form-app"));
               
        // Enviamos los datos al archivo PHP 
        $.ajax({
            url: "whatsapp.php",
            type: "post",
            dataType: "json",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
              $('#respuesta').html("<img src='https://icon-library.com/images/ajax-loading-icon/ajax-loading-icon-2.jpg' />");
            },
        })
 
        // Si el formulario es enviado, mostramos un mensaje
        // si no hay problemas
        .done(function (res) {                  
            // Mostramos el mensaje de respuesta
            $("#respuesta").html(res.mensaje);
            $("#form-app").trigger("reset");    
        })
 
        // Mensaje de error al enviar el formulario 
        .fail(function (res) {                    
            $("#respuesta").html("Error desconocido: " + res.mensaje);
        });
    });
});
</script>

Y debes modificar el archivo whatsapp.php con lo siguientes cambios:

$respuesta = json_decode($response);

if ($respuesta->success !== true or $respuesta->status !== 200) {
    echo json_encode(['mensaje'=>'<h1>Error</h1><p>El mensaje no ha sido enviado. Comprobar mensaje de respuesta: <pre>'.$response.'</pre>']);
    die();
} else {
    echo json_encode(['mensaje'=>'<h1>Mensaje enviado correctamente</h1>']);
}

Explicación breve:

El código javascript lo he adaptado para tu caso concreto, pero todo el crédito es de donde lo he sacado que es esta web. Es bastante autoexplicativo, o eso espero. Procura colocarlo donde he indicado.

Fíjate que encima del tag <script> he agregado un <div id="respuesta"></div> necesario para recibir las respuesta de whatsapp.php.

En cuanto a whatapp.php, el cambio es solo como se devuelve el mensaje, que debe estar en formato json, y de acuerdo con el javascript agregado anteriormente, espera una respuesta llamada mensaje.

Por lo tanto ha quedado así:

echo json_encode(['mensaje'=>'<h1>Mensaje enviado correctamente</h1>']);

aunque esto tambien es lo mismo (es para ahorrarme código):

echo json_encode(array('mensaje'=>'<h1>Mensaje enviado correctamente</h1>'));

Importante: Debes usar jquery en tu archivo html. Encontrarás las instrucciones para usarlo en su sitio web. Te recomiendo que lo uses con CDN para no liarte con una instalación local.

Deberia funcionarte a la primera si has seguido estas instrucciones.

6
  • Funciono perfecto, muchisimas gracias. Commented el 17 dic. 2021 a las 20:09
  • Bueno, luego me di cuenta que no he contestado completamente a tu pregunta, que era como mostrarlo por debajo del formulario. Para eso necesitas Ajax, te lo estoy preparando un poco aun.
    – masterguru
    Commented el 17 dic. 2021 a las 20:11
  • Excelente, gracias si lo agradecería bastante Commented el 17 dic. 2021 a las 20:21
  • Pues lo acabo de poner, ya me diras si te funciona.
    – masterguru
    Commented el 17 dic. 2021 a las 20:52
  • Eso es porque no has puesto bien el jquery. Yo lo puse dentro del <head> así: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    – masterguru
    Commented el 17 dic. 2021 a las 21:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.