2011-03-14 20 views
9

Tenemos un gran sistema PHP que estoy cambiando a OOP y quiero usar AJAX para actualizar las páginas web para los usuarios que han iniciado sesión. Soy completamente autodidacta y soy bueno en HTML, CSS y PHP con una comprensión básica de Javascript.PHP básico y AJAX

Tratando de aprender AJAX con PHP me está derrotando. Después de probar un conjunto de scripts hecho por mí mismo para probar AJAX que no funcionaría, luego fui a Internet para obtener ejemplos y no puedo conseguir que ninguno funcione. Esto está en mi Mac de desarrollo ejecutando MAMP y usando mi host donde guardamos el sistema actual.

Mi pregunta es, ¿alguien tiene un conjunto simple de 'hola mundo' de scripts HTML y PHP que saben que el trabajo que podría tratar de confirmar que puedo ejecutar algo conocido.

Muchas Gracias Colin

+1

Usted puede encontrar que el uso de una biblioteca de Javascript como jQuery AJAX hace que su mucho más fácil. Sin ver sus intentos actuales, es difícil saber si tiene problemas de compatibilidad con el navegador o solo problemas de código cotidianos. jQuery se deshace de la mayoría de los problemas de compatibilidad. – dnagirl

Respuesta

8

No, no realmente, pero yo recomendaría que utiliza jQuery si vas a estar haciendo cualquier ajax en absoluto. Hará tu vida mucho más fácil.

Especialmente porque todos los navegadores no implementan las cosas de ajax de la misma manera.

ejemplo de aplicación usando jQuery + PHP para las llamadas ajax:

Voy a suponer que usted ya tiene algún documento html base, sólo voy a incluir los bits importantes ..

receptor .php:

<?php 
echo 'you just received me, I\'m some PHP code and ajax is definitely working...'; 
?> 

sender.html:

<p>Hello, click this button: <a id="button" href="receiver.php">Click me</a></p> 
<p id="container"><!-- currently it's empty --></p> 

<!-- including jQuery from the google cdn --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

<script type="text/javascript"> 
// This is our actual script 
$(document).ready(function(){ 
    $('a#button').click(function(){ 
     $.ajax({ 
      url: this.href, 
      type: 'GET', 
      dataType: 'html', 
      success: function (data) { 
       $('#container').html(data); 
      } 
     }); 
    }); 
}); 
</script> 

eso se debe al l necesita una aplicación básica de ajax ...

+0

Gracias hasta ahora. En el programa en el que estoy trabajando no quiero usar jquery. El resto del diseño HTML y Javascript está trabajando con mi uso de AJAX, que es un botón en una fila de botones en una parte de la página seleccionada y muestra la parte funcional de la página en un div en otra parte de la página. Por lo que yo veo, esto solo debería necesitar un script AJAX para llamar a la función en un script PHP seleccionado usando el id. Del botón junto con los datos del formulario en $ _POST. Si puedo escribir esto una vez que está allí y trabajar sin tener que calcular cómo funciona jquery, será más fácil de mantener en el futuro. –

+0

@Colin - si realmente desea utilizar javascript, necesitará leer en http://www.jibbering.com/2002/4/httprequest.html. La página también te mostrará cómo crear objetos para IE y Firefox. –

+0

Vas a tener problemas con eso. Solía ​​hacer eso antes de que apareciera jQuery/prototype y pasé la mayor parte del tiempo en la implementación de ajax, en lugar de mi aplicación/ajax logic – arnorhs

11

Si va a utilizar AJAX, le recomendaría usar jQuery también. Esto simplifica enormemente el proceso, se prueba en varios navegadores y tiene muchas funciones de contenedor fáciles de usar.

Es realmente tan fácil como crear una página PHP llamada hola.php

<?php 
    echo "Hello World"; 
?> 

Luego, en su página principal que tendrá que agarrar la biblioteca jQuery y conectarlo a la lista de eventos documento.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $.get("hello.php", function(data){ 
      alert(data); 
     }); 
    }); 
</script> 

Esto, en esencia, es el más simple de AJAX tutorial hola mundo que conozco :)

2

Aquí hay un ejemplo básico que utiliza jQuery, registrando los valores de un formulario a un archivo PHP separada valida y devuelve los resultados.

form.php

<html> 

<head> 
<title>Simple JQuery Post Form to PHP Example</title> 
</head> 

<body> 

<!-- including jQuery from the google cdn --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">  </script> 

<!-- This div will be populated with error messages --> 
<div id="example_form_error"></div> 

<!-- This div will be populated with success messages --> 
<div id="example_form_success"></div> 

<!-- Here is your form --> 
<div id="example_form_enter"> 
    <form id="contact_modal_form" method='post' action='form_post.php'> 
      <label for="Name">Enter Your Name (Not "Adam"):</label> <input class='textbox' name='Name' type='text' size='25' required /> 
      <button class='contact_modal_button' type='submit'>Send</button> 
    </form> 
</div> 

<!-- This div contains a section that is hidden initially, but displayed when the form is submitted successfully --> 
<div id="example_form_confirmation" style="display: none"> 
    <p> 
     Additional static div displayed on success. 
     <br> 
     <br> 
     <a href="form.php">Try Again</a> 
    </p> 
</div> 

<!-- Below is the jQuery function that process form submission and receives back results --> 
<script> 
    $(function() { 
     $("#contact_modal_form").submit(function(event) { 
      var form = $(this); 
      $.ajax({ 
       type: form.attr('method'), 
       url: form.attr('action'), 
       data: form.serialize(), 
       dataType: 'json', 
       success: function(data) { 
        if(data.error == true) { 
         var error = $("#example_form_error"); 
         error.css("color", "red"); 
         error.html("Not " + data.msg + ". Please enter a different name."); 
        } else { 
         $("#example_form_enter").hide(); 
         $("#example_form_error").hide(); 
         $("#example_form_confirmation").show(); 

         var success = $("#example_form_success"); 
         success.css("color", "green"); 
         success.html("Success! You submitted the name " + data.msg + "."); 
        } 
       } 
      }); 
      event.preventDefault(); 
     }); 
    }); 
</script> 

</body> 

</html> 

form_post.php

<?php 

    // Request Post Variable 
    $name = $_REQUEST['Name']; 

    // Validation 
    if($name == 'Adam') { 
    echo json_error($_REQUEST['Name']); 
    } else { 
    echo json_success($_REQUEST['Name']); 
    }; 

    // Return Success Function 
    function json_success($msg) { 
     $return = array(); 
     $return['error'] = FALSE; 
     $return['msg'] = $msg; 
     return json_encode($return); 
    } 

    // Return Error Function 
    function json_error($msg) { 
     $return = array(); 
     $return['error'] = TRUE; 
     $return['msg'] = $msg; 
     return json_encode($return); 
    } 

?>