1

ajaxでphpメールフォームを処理しようとしています。ユーザーの電話番号などを添えて私のメールにメッセージを送るシンプルなフォームです。

私はphpの経験がまったくありませんが、通常の送信を使用してメールを送信してから、インデックスページに戻るようにしました。

これはユーザーにフィードバックを提供しないため、これはうまくいきません。JQuery を使用した例をいくつか見つけました。また、GET と POST の両方を使用している人も見てきました。どのように進めたらいいのか、今から迷っています。

私が達成しようとしているものの JQuery バージョンは、これに似ていると思います。

var dataString = 'name='+ name + '&email=' + email + '&message=' + message;

$.ajax({
  type: "POST",
  url: "mail.php",
  data: dataString,
  success: function() {
    $('#myForm').html("<div id='response'></div>");
    $('#response').html("<h2>Contact Form Submitted!</h2>");
  }
});

<?php
$mail = $_POST['email '];
$name = $_POST['name'];
$subject = 'new submit';
$text = $_POST['message'];
$to = “yourmail@domain.com”;
$message =” You received  a mail from “.$mail;
$message .=” Text of the message : “.$text;
mail($to, $subject,$message)
?>
4

2 に答える 2

0

次のように解決しました：

<form id="form" method="post" name="mailform" action="mail.php" onsubmit="mail(); return false;">
    <p>
        <label for='name'>Stuff</label><br>
        <input type="text" name="stuff">
    </p>
    <input type="submit" name="submit" value="Send">
</form>
<p id="result" style="display: none">
<img src="images/succes.png"><br>
Thank you
</p>

/*----------------------------*/

function mail() {
var form = document.getElementById("form");
var name = form.name.value; 
var email = form.email.value; 
var phone = form.phone.value; 
var message = form.message.value; 
var valid = true;

if (!name) {form.name.style.backgroundColor = '#FF9481'; valid = false; }
else {form.name.style.backgroundColor = '';}
if (!email && !phone) {form.email.style.backgroundColor = '#FF9481'; form.phone.style.backgroundColor = '#FF9481'; valid = false;}
else {form.email.style.backgroundColor = ''; form.phone.style.backgroundColor = '';}
if (!message) {form.message.style.backgroundColor = '#FF9481'; valid = false;}
else {form.message.style.backgroundColor = '';}
if (email) {
    var patt=/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi;
    var result=patt.test(email);
    if (!result) {form.email.style.backgroundColor = '#FF9481'; valid = false;}
    else form.email.style.backgroundColor = '';
    }
if (phone) {
    var patt=/[^0-9|\-| ]/g;
    var result=patt.test(phone);
    if (result) {form.phone.style.backgroundColor = '#FF9481'; valid = false;}
    else form.phone.style.backgroundColor = '';
    }
if (!valid) return false;

var datastr = 'name='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            if (xmlhttp.responseText == "ok") {
            form.style.display = 'none';
            document.getElementById("result").style.display = '';
            }
            else {
            form.message.value= "That doesn't seem right";
            }       
        }
  }
xmlhttp.open("GET","mail.php?" + datastr,true);
xmlhttp.send();
}

/*----------------------------*/

<?php
$name = $_GET['name'];
$etc...

if(IsInjected($name)||IsInjected($visitor_email)||IsInjected($phone)||IsInjected($message)) 
{
    echo "Something fishy going on?";
    exit;
}

[...]
mail($to,$email_subject,$email_body,$headers);
echo "ok";

function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
?>
于 2012-08-05T17:02:10.230 に答える
0

他の人が言ったように、jQuery は AJAX を使用する自然な方法よりも優れています。しかし、その答えを得るには、まず JavaScript で XmlHttp オブジェクトを作成する必要があります。次に、適切な GET または POST メソッドを使用して値をページに送信できます。その後、stateChanged 関数で実装されている投稿されたリクエストの状態を取得することで、プロセスを追跡できます。それで全部です！

var xmlhttp

function retrive(url, str){
    xmlhttp = GetXMLHTTPObject();
    if(xmlhttp==null){
        alert("Your browser doesn't support the ajax.");
        return;
    }
    var script=url;
    script=script+"?value="+str;
    xmlhttp.onreadystatechange = stateChanged;
    xmlhttp.open("GET",script,true);
    xmlhttp.send(null); 
}

function stateChanged(){
    if(xmlhttp.readyState == 0){
        document.getElementById("result").innerHTML = "not initialized";
    }
    if(xmlhttp.readyState == 1){
        document.getElementById("result").innerHTML = "has been set up";
    }
    if(xmlhttp.readyState == 2){
        document.getElementById("result").innerHTML = "has been sent";
    }
    if(xmlhttp.readyState == 3){
        document.getElementById("result").innerHTML = "in process";
    }
    if(xmlhttp.readyState == 4){
        document.getElementById("result").innerHTML = xmlhttp.responseText;
    }
}

function GetXMLHTTPObject(){
    if(window.XMLHttpRequest){
        //code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    }
    if(window.ActiveXObject){
        //code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}

XmlHttpObject の定義を見た方が良いと思います。

于 2012-08-03T16:15:58.010 に答える