javascript - 验证javascript文件上的信息后如何将数据发送到php

Question

我听说过 Ajax/XMLhttprequest，但我不太确定这是否是我将数据从 javascript 变量传输到 php 所需要的。

该网页基本上是一个联系我们的页面，客户在其中输入他们的信息和电子邮件，javascript 检查输入是否已输入并验证电子邮件是否有 @。如果一切正常，那么客户将能够提交表格，并且应该会向我发送一封电子邮件。

我做了两件事，1 我可以让 php 文件向我发送电子邮件，但是我将不得不忽略 javascript 验证。 2 我可以让 javacript 验证正常工作，但是 php 文件无法正常工作，因为我无法传输数据。我知道 javascript 在客户端执行，而 php 在服务器端执行，这就是为什么我认为我需要在将信息发送到服务器之前在客户端验证信息。

HTML

       <form id="uDF" method="post" onsubmit="submitValidation()">
            <input name="uDFName" type="text" id="fName" placeholder="Name"><br>
            <input name="uDFNumber" type="text" id="phone" placeholder="Mobile/Phone Line"><br>
            <input name="uDFEmail" type="text" id="email" placeholder="Email"><br>
            <input name="uDFSubject" type="text" id="subject" placeholder="Subject"><br>
            <textarea name="uDFMessage" placeholder="Message......"></textarea><br>
            <input type="submit" name="uDFButton" value="Submit" class="btnSubmit" id="test">
        </form>

Javascript

function submitValidation(){
var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value,
document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value,
document.forms ["uDF"] ["uDFMessage"].value,]

var char = ''; // variable used to check whether email has @
var x;
var isEmail = false;
var isNotEmpty = false;

//for loop checks email for @ char
for(x = 0; x<data[2].length;x++)
{
    char = data[2].charAt(x);
    if(char === "@"){
        isEmail = true;
        break;
    }
}

var i;

//for loop check if data is collected
for(i=0;i < 5;i++){
    if(data[i] === ""){
        isNotEmpty = false;
    }else{
        isNotEmpty = true;
    }
}
if(isEmail === true && isNotEmpty === true)
{
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP
}else if (!isNotEmpty){
    alert('Empty fields');
}else if(!isEmail){
    alert("Please enter valid email!");
}
}

PHP

<?php
$uDFName = $_POST['uDFName'];
$uDFNumber = $_POST['uDFNumber'];
$uDFEmail = $_POST['uDFEmail'];
$uDFSubject = $_POST['uDFSubject'];
$uDFMessage = $uDFName . "\r\n" . $uDFNumber . "\r\n" . "";

// In case any of our lines are larger than 70 characters, we should use 
wordwrap()
$message = wordwrap($message, 70, "\r\n");
mail($uDFEmail, $uDFSubject, $uDFMessage);

如果我将它作为 action=("mail.php) 放在表单上，​​PHP 就可以工作，但是当然不会进行任何验证。

Answer 1

验证完成后

你可以这样试试

它将像这样工作。

验证后它将调用外部php 文件。它将使用此 $('#yourform').serialize() 将所有 input type 表单数据发送到该 php 文件中。

你可以在你的 php 文件中获取 input form data $name = $_POST['name'];

这将与传统的 php GET 和 POST 一样工作，但这里的概念是没有页面加载。

希望你现在能看懂。

function submitValidation(){ 

var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value, document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value, document.forms ["uDF"] ["uDFMessage"].value,];

var char = ''; // variable used to check whether email has @
var x;
var isEmail = false;
var isNotEmpty = false;

//for loop checks email for @ char
for(x = 0; x<data[2].length;x++)
{
    char = data[2].charAt(x);
    if(char === "@"){
        isEmail = true;
        break;
    }
}

var i;

//for loop check if data is collected
for(i=0;i < 5;i++){
    if(data[i] === ""){
        isNotEmpty = false;
    }else{
        isNotEmpty = true;
    }
}
if(isEmail === true && isNotEmpty === true)
{
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP
     /**** Your Ajax ****/
    $.ajax(
    {
       url: 'yourphpfile.php',
       type: 'post',
       data: $("#uDF").serialize(),
       success: function(response) {
         console.log(response);
       }
    });
   return false;


}else if (!isNotEmpty){
    alert('Empty fields');
    return false;
}else if(!isEmail){
    alert("Please enter valid email!");
    return false;
}



}