如何在javascript中编写ajax?

时间:2017-06-26 23:12:55

标签: javascript php jquery html ajax

我正在做一个网络,现在我正在处理HTML的表格。 我希望我的表单有javascript和php,我需要javascript有ajax。

当我在我的服务器中发送我的代码时(它是一个拥有PHP的服务器),Ajax总是响应我在error:function中的参数。我不明白这个问题。我在不同的网站和不同的例子中观看过,但我无法找到解决方案。

所有脚本都是独立的,所有脚本都是正确的。

谢谢!

这是HTML(contacto.html):

<form id="contacto" method="post" onsubmit="return validarFormulario()" >
    <input id="nombre" name="nombre" type="text" placeholder="Nombre (*)"/>
    <input id="correo1" name="correo1" type="email" placeholder="Correo  (*)"/>
    <input id="correo2" name="correo2" type="email" placeholder="Repite el correo  (*)"/>
    <input id="asunto" name="asunto" type="text" placeholder="Asunto  (*)"/>
    <textArea id="mensaje" name="mensaje" placeholder="Mensaje  (*)"></textArea>
    <input id="enviar" name="enviar" type="submit" value="Enviar"/>
</form>

这是javascript(functionContacto.js):

var nombre;
var correo1;
var correo2;
var asunto;
var mensaje;
var alerta = document.getElementById("alert");

function validarFormulario(){
    nombre = document.getElementById("nombre");
    correo1 = document.getElementById("correo1");
    correo2 = document.getElementById("correo2");
    asunto = document.getElementById("asunto");
    mensaje = document.getElementById("mensaje");


    if(nombre.value == "" || correo1.value == "" || asunto.value=="" || mensaje.value == ""){
        alerta.style.padding="10px";
        alerta.style.color="#a94442";
        alerta.style.background="#f2dede";
        alerta.innerHTML = "Rellena los campos marcados";

        return false;

    }else{
        if(correo1.value == correo2.value){

            Enviar();

        }else{
            alerta.style.padding="10px";
            alerta.style.color="#a94442";
            alerta.style.background="#f2dede";
            alerta.innerHTML = "Los correos no coinciden";

            return false;

        }       

    }

}

function Enviar(){  

    nombre = document.getElementById("nombre");
    correo1 = document.getElementById("correo1");
    asunto = document.getElementById("asunto");
    mensaje = document.getElementById("mensaje");

    var dataString = "name=" + nombre + "&mail=" + correo1 + "&subjet=" + asunto + "text=" + mensaje;



    $.ajax({
        type:"POST",
        url:"../php/formulario.php",
        data: dataString,
        success : function(){
            alert('funciona');
        },
        error: function(){
            alert('error');
      }     

    });
}

这是PHP(formulario.php):

<?php

    $nombre = $_POST["name"];
    $email = $_POST["email"];
    $asunto = $_GET["subjet"];
    $mensaje = $_GET["text"];

    $correo = "Nombre: ".$nombre."\n\nEmail: ".$email."\n\nMensaje:\n".$mensaje;
    $to = "myMail@gmail.com";
    $subject = $asunto;

    mail($to, $subject, $correo);

?>

1 个答案:

答案 0 :(得分:0)

两个问题。

首先,您需要正确编码数据字符串,以防它包含具有特殊含义的字符。执行此操作的最佳方法是使用对象,然后jQuery将自动对其进行正确编码。此外,您需要使用.value来访问输入字段的值(就像您在validarFormulario中所做的那样)。

var dataString = {
    name: nombre.value,
    mail: correo1.value,
    subjet: asunto.value,
    text: mensaje.value
};

其次,在PHP中,您需要从$_POST获取所有参数,而不是$_GET

$nombre = $_POST["name"];
$email = $_POST["email"];
$asunto = $_POST["subjet"];
$mensaje = $_POST["text"];