1

Estoy intentando crear un formulario que funcione con Ajax y Php, pero todavía no he podido hacerlo debido que estoy cometiendo un error y no se cual. Les dejo aquí el código para que me puedan ayudar.

La idea de la página es que donde esta el input que es donde la persona va ingresar una url, yo pueda guardar lo que haya ingresado en un archivo txt. No quiero que se recargue la página porque necesito usar Ajax para que la página no se recargue y que usuario pueda ingresar una url, ejemplo: http://undominiocualquiera.mp4 para que se pueda visualizar en el reproductor jw player.

Borre los estilos y un poco del código del reproductor para que no se haga muy largo el código html. Sí alguien lo quiere, me lo pueden pedir para probarlo.

/*
*CODIGO AJAX: FORM.JS
*/
/*
*CODIGO AJAX: FORMS.JS
*/
/*
*Funcion Javascript para enviar formularios sin recargar la página mediante ajax
*/

/* "escuchamos" el click en el botón con id "submit" solo si ya se ha cargado la página*/

$(function(){
   $('#submit').click(function(e){
      //evitamos la carga de la página
      e.preventDefault();
      //recogemos el id del formulario a enviar
      var form = $(this).attr("form-id");
      //llamamos a la función que contendrá el llamado ajax dándole como argumento el id del formulario
      submitForm(form);
   });
});

//fuera de la carga de la página, creamos la función que recibe el id del formulario a enviar.

function submitForm(form){
   //recogemos el "action" a donde se enviarán los datos mediante "POST"
   var action = $("form#" + form).attr("action");
   //ahora recogemos los datos de los controles que hayamos definido y los serializamos como un formulario con Javascript
   var datos = $('form#' + form).serialize();
   //recogemos la posicion actual del id "mensaje" esto para que al recibir la respuesta de PHP se haga scroll hasta alli para mostrarlo correctamente.
   var mensaje = document.getElementById('mensaje').offsetTop - 20;

   //enviamos los datos mediante Ajax con la función de Jquery que nos facilita esta tarea

   $.ajax({
      //url a enviar
      url: 'enviar_chh.php',
      //el tipo GET o POST en nuestro caso POST
      type: 'POST',
      //evitamos el cacheo de los datos
      cache: false,
      //evitamos que el JS procese los datos
      proccessData: false,
      //definimos los datos a enviar, nosotros ya los tenemos definidos en la variable "datos"
      data: datos
      //cuando se recibe la respuesta se activa el siguiente trozo de código
      //la r que recibe la funcion de callback es "response" que viene del script PHP
   }).done(function(r){
      //hacemos scroll hasta el id "mensaje"
      $('body, html').animate({
         scrollTop: mensaje
      }, 700);
      //imprimimos con HTML el mensaje recibido
      $('#mensaje').html(r);
      //eso es todo
   });
}
<!DOCTYPE html>
<!-- CODIGO HTML: INDEX.HTM -->
<!-- CODIGO HTML: INDEX.HTM -->
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" charset="utf-8" async="" src="./ipptv_files/related.js.descarga"></script><script type="text/javascript" charset="utf-8" async="" src="./ipptv_files/jwpsrv.js.descarga"></script>
    
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IPTV Player - DaZPlayer</title>
    <link rel="stylesheet" href="./ipptv_files/developer.css">
    <link rel="stylesheet" href="./ipptv_files/style.css">
    <script src="jquery-3.1.1.js"></script>
    <script src="form.js"></script>

  <script type="text/javascript" charset="utf-8" async="" src="./ipptv_files/jwplayer.core.controls.js.descarga"></script><script type="text/javascript" charset="utf-8" async="" src="./ipptv_files/provider.hlsjs.js.descarga"></script>

</head>
  <body>

  <div class="page" id="stream-tester">
    <div class="mkdocs-jwplayer">
    <div>

  <div class="jw-tool">
    <div class="container">
      <div class="row">
        <div class="column sm-12 lg-6">

          <div class="tool-settings">
            <div class="configuration" style="display:none">
              <h2>Player Version:</h2>
              <label>
                <input name="version" type="radio" value="8" checked="">
                  JW Player 8
              </label>
              <label>
                <input name="version" type="radio" value="7">
                  JW Player 7
              </label>
            </div>

            <div id="mensaje"></div>
            <form id="form-registro" action="enviar_chh.php" method="post">
            <div class="configuration">
              <h2>Escriba una URL de algún canal:</h2>
              <input id="file" type="text" name="canal" placeholder="https://content.jwplatform.com/manifests/yp34SRmf.m3u8" value="">
            </div>

            <div class="configuration" style="display:none">

              <label style="display:none">
                <input name="primary" type="radio" value="html5" checked="">
                HTML5
              </label>

              <label style="display:none">
                <input name="primary" type="radio" value="flash" disabled="">
                Flash
              </label>

              <label style="display:none" class="tooltip tooltip-top-center">
                <input name="hls" type="checkbox">
                Force type to HLS
                <span class="tooltip-content tooltip-content-wrap">
                </span>
              </label>

            </div>

            <div id="drm" class="configuration" style="display:none">

              <div id="drm-default" class="drm-item drm-item-selected" style="display:none">
                <label>
                  <input name="drm" type="radio" value="" checked="checked">
                  None
                </label>
              </div>

              <div id="drm-widevine" class="drm-item">
                <label>
                  <input name="drm" type="radio" value="widevine">
                  Widevine
                </label>
                <div class="drm-item-options">
                  <label>
                    Widevine Url:
                    <input id="drm-widevine-url" type="text">
                  </label>
                  <label>
                    <input name="drm-item-custom-data" type="checkbox">
                    Use custom data? (optional)
                  </label>
                  <div class="drm-item-custom-data">
                    <label>
                      Custom Name:
                      <input id="drm-widevine-custom-name" type="text">
                    </label>
                    <label>
                      Custom Value:
                      <input id="drm-widevine-custom-value" type="text">
                    </label>
                  </div>
                </div>
              </div>

              <div id="drm-playready" class="drm-item drm-item-not-supported">
                <label>
                  <input name="drm" type="radio" value="playready" disabled="">
                  Playready
                </label>
                <div class="drm-item-options">
                  <label>
                    Playready Url:
                    <input id="drm-playready-url" type="text" disabled="">
                  </label>
                  <label>
                    <input name="drm-item-custom-data" type="checkbox" disabled="">
                    Use custom data? (optional)
                  </label>
                  <div class="drm-item-custom-data">
                    <label>
                      Custom Name:
                      <input id="drm-playready-custom-name" type="text" disabled="">
                    </label>
                    <label>
                      Custom Value:
                      <input id="drm-playready-custom-value" type="text" disabled="">
                    </label>
                  </div>
                </div>
              </div>

              <div id="drm-fairplay" class="drm-item drm-item-not-supported">
                <label>
                  <input name="drm" type="radio" value="fairplay" disabled="">
                  Fairplay
                </label>
                <div class="drm-item-options">
                  <label>
                    Certificate URL:
                    <input id="drm-fairplay-certificate-url" type="text" disabled="">
                  </label>
                  <label>
                    Process SPC URL:
                    <input id="drm-fairplay-process-spc-url" type="text" disabled="">
                  </label>
                </div>
              </div>

              <div id="drm-clearkey" class="drm-item">
                <label>
                  <input name="drm" type="radio" value="clearkey">
                  Clearkey
                </label>
                <div class="drm-item-options">
                  <label>
                    ClearKey Key:
                    <input id="drm-clearkey-key" type="text">
                  </label>
                  <label>
                    ClearKey Key ID:
                    <input id="drm-clearkey-key-id" type="text">
                  </label>
                </div>
              </div>

            </div>

            <div class="button-set">
              <button class="button button-sm" type="submit" id="submit" form-id="form-registro" type="button" name="button" >Reproducir canal</button>
            </div>
          </form>
            <div id="test-output" class="test-output test-output-visible" style="display:none">
              <h2>Test Player Config Output</h2>
              <pre><code id="output-code" class="javascript hljs">{
  <span class="hljs-string">"playlist"</span>: [
    {
      <span class="hljs-string">"sources"</span>: [
        {
          <span class="hljs-string">"default"</span>: <span class="hljs-literal">false</span>,
          <span class="hljs-string">"file"</span>: <span class="hljs-string">"https://content.jwplatform.com/manifests/yp34SRmf.m3u8"</span>,
          <span class="hljs-string">"label"</span>: <span class="hljs-string">"0"</span>,
          <span class="hljs-string">"type"</span>: <span class="hljs-string">"hls"</span>
        }
      ]
    }
  ],
  <span class="hljs-string">"primary"</span>: <span class="hljs-string">"html5"</span>,
  <span class="hljs-string">"hlshtml"</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-string">"id"</span>: <span class="hljs-string">"stream-tester-player-https"</span>
}</code></pre>
            </div>

          </div>
        </div>

        <div class="column sm-12 lg-6">
          <div class="tool-player">
            <div class="player-preview">JW Player Test</div>
           
            <!-- <div id="stream-tester-player-http" class="u-hidden">
              <iframe style="border: none; display: block; height: 500px; width: 100%;"></iframe>
              This stream tester requires HTTPS streams. Using an HTTP stream with our stream tester may cause your test to fail.
            </div> -->
            <p>
              DRM solutions are available for both HLS and MPEG-DASH adaptive streaming technologies and are configurable via the <a href="http://demo.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/#drm">JW Player Javascript API</a>.
            </p>
            <p>
              Note that JW Player's DRM support is constrained by what the DRM makers themselves support. For example, Apple supports FPS in Safari on Mac OS, but not in Safari on iOS.
            </p>
          </div>
        </div>

      </div>

    </div>

  </div>

</div>


    </div>
    <script src="./ipptv_files/jquery.min.js.descarga"></script>
    <script src="./ipptv_files/developer.js.descarga"></script>
    <script type="text/javascript" src="./ipptv_files/stream-tester.js.descarga"></script><script src="./ipptv_files/wr6i4gal.js.descarga"></script>


</body>
</html>

---------------------------

Luego el código php: enviar_chh.php

//codigo php: enviar_chh.php
//codigo php: enviar_chh.php

<?php
$canal="";
if (!empty($_REQUEST['canal'])){
$canal=$_REQUEST['canal'];
}

//Luego sobrescribo el txt

$archivo="datos.txt";

     $file=fopen($archivo,"a");
     fwrite($file,$canal);
     fclose($file);
?>


Les daría mil gracias si alguien me podría ayudar, diciéndome donde esta el error y como solucionarlo. Saludos.

1 respuesta 1

0

El parametro Done del ajax no hace lo que tu piensas , sirve para saber si se ha enviado correctamente o no la petición ajax , pero no controla la respuesta .

Para controlar la respuesta del ajax has de utilizar el "success"

Prueba de ejecutar tu código , a mi esto me funciona

File: index.js

var request = $.ajax({
    //url a enviar
    url: '/test.php',
    //el tipo GET o POST en nuestro caso POST
    type: 'post',
    //definimos los datos a enviar, nosotros ya los tenemos definidos en la variable "datos"
    data: {data: 'aaaaa'},
    success: function (output) {
        // aqui tu respuesta se enseña en consola
        console.log(output);
    }

});
request.done(function () {
    console.log('La peticion AJAX se ha enviado correctamente ');
});
request.fail(function () {
    console.log('Algo ha malo ha sucedido :( ');
});

File :index.php

$canal="";
if (!empty($_REQUEST['data'])){
    $canal=$_REQUEST['data'];
}

//Luego sobrescribo el txt

$archivo="datos.txt";

$file=fopen($archivo,"a");
fwrite($file,$canal);
fclose($file);
echo $canal;

Es importante tener en cuenta tu estructura de carpetas para que la llamada AJAX encuentre el PHP , en mi caso esta todo en la raiz /index.php , /index.js Revisa que no te estes confundiendo con las rutas relativas y/o absolutas

1
  • Muchas gracias amigo, saludos.
    – DaZ
    Commented el 28 mar. 2018 a las 0:22

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.