jQuery Error de formulario AJAX. Cadena vacía

Question

Tengo un problema cuando envío un formulario de contacto a través de Ajax a un script PHP. He utilizado la función jQuery/Ajax anteriormente, así como la secuencia de comandos de contacto, sin embargo, en esta ocasión, el proceso se ejecuta hasta la petición ajax y luego devuelve el error: cadena vacía.

$(document).ready(function(){ 
    jQuery("#sendmail").click(function(){ 
     var name = $("#name").val(); 
     var phone = $("#phone").val(); 
     var email = $("#email").val(); 
     var text = $("#message").val(); 

     //var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&text=' + text; 
     var datastr ='name=' + name + '&phone=' + phone + '&email=' + email + '&text=' + text; 
     $("#form-div").css("float", "left"); 
     $("#form-div").html("<p>Thank you for contacting Stillframe Photography.</p><p>Please wait for just a few moments while your enquiry is being sent.</p>"); 
     $("#form-div").fadeIn("slow"); 

     alert(datastr); 

     jQuery.ajax({ 
      type: "POST", 
      url: "contact.script.php", 
      data: datastr, 
      success: function(html){ 
      $("#response").fadeIn("slow"); 
      $("#response").html(html); 
      //setTimeout('$("#response").fadeOut("slow")',2000); 
      } 
      ,error: function (XMLHttpRequest, textStatus, errorThrown) { 
           $("#response").html('there was an error'); 
          console.log('error thrown'); 
          console.log(errorThrown); 
      } 
     }); 
    }); 
}); 

Se puede ver la página en funcionamiento en http://www.stillframe.com.au/test.php y se puede ver la forma sin los medios de comunicación en la página en el mismo enlace de arriba, pero test2.php

También he añadido el guión sin ninguna otra jQuery a la misma url pero test3.php que se envía directamente al script PHP de contacto para confirmar que no hay errores en ese script.

SOLUCIONADO: Se ha eliminado la etiqueta href base del encabezado y la secuencia de comandos ahora funciona bien.

Answer 1

Es mejor utilizar ajax con JavaScript sin formato debido a las siguientes razones.

1. El código es muy simple y corto.
2. Nunca terminará con ningún error.

3. Su objetivo es simplemente enviar variables de javascript a php en el descanso correcto se encargará, déjame agregar un código de muestra a continuación para usted.

   function insert(){ 
   if(window.XMLHttpRequest) 
   { 
       xmlhttp = new window.XMLHttpRequest(); 
   } 
   else 
   { 
       xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
   } 
   
   xmlhttp.onreadystatechange = function() { 
       if(xmlhttp.readyState == '4' && xmlhttp.status == '200') 
       { 
        document.getElementById('msg').innerHTML = xmlhttp.responseText;  
       } 
   } 
   
   name = document.getElementById('insert').value; 
   
   parameters = 'insert=' + name; 
   
   xmlhttp.open('POST', 'day3.include.php', true); 
   xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
   xmlhttp.send(parameters); 
   

   }

En parámetros pasar todas las variables en consecuencia y crear un div # msg para mostrar la respuesta de php.

Si usted tiene alguna confusión me pregunta de nuevo en http://www.thetutlage.com

Answer 2

En lugar de utilizar campo por campo, utilice el formulario Id <form id="myform"> y serializarlo. Pruebe esto:

$(document).ready(function(){ 
    jQuery("#sendmail").click(function(){ 
     jQuery.ajax({ 
      type: "POST", 
      url: "contact.script.php", 
      data: $('#myform').serialize(), 
      cache: false, 
      success: function(output) { 
       $("#form-div").css("float", "left"); 
       $("#form-div").html("<p>Thank you for contacting Stillframe Photography.</p><p>Please wait for just a few moments while your enquiry is being sent.</p>"); 
       $("#form-div").fadeIn("slow"); 
       $("#response").html(output); 
       $("#response").fadeIn("slow"); 
       //setTimeout('$("#response").fadeOut("slow")',2000); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
           $("#response").html('there was an error'); 
          console.log('error thrown'); 
          console.log(errorThrown); 
      } 
     }); 
    }); 
});