如何制作Ajax聯系表格

Question

PS編輯已刪除不必要的代碼

你能告訴我我在做什么錯嗎？ 錯誤日志未顯示任何內容。

這是我的html，js和php。

sample.js

  // this is to prevent page refresh, right? stepsForm.prototype.options = { onSubmit : function() { return false; } }; // submits the form, but i add some js in sample.html, so this one will not work. stepsForm.prototype._submit = function() { this.options.onSubmit( this.el ); } 

sample.html

 <div class="container"> <section> <form id="theForm" class="simform" autocomplete="off" action="form-process.php"> <div class="simform-inner"> <ol class="questions"> <li> <span><label for="q1">What's your name / full name?</label></span> <input id="q1" name="q1" type="text" /> </li> <li> <span><label for="q2">What's your email address?</label></span> <input id="q2" name="q2" type="text" data-validate="email" /> </li> <li> <span><label for="q3">What's your phone number?</label></span> <input id="q3" name="q3" type="text" data-validate="phone" /> </li> <li> <span><label for="q4">Type your question below?</label></span> <input id="q4" name="q4" type="text" /> </li> </ol> <!-- /questions --> <button class="submit" type="submit">Send answers</button> <div class="controls"> <button class="next"></button> <div class="progress"></div> <span class="number"> <span class="number-current"></span> <span class="number-total"></span> </span> <span class="error-message"></span> </div> <!-- / controls --> </div> <!-- /simform-inner --> <span class="final-message"></span> </form> <!-- /simform --> </section> </div> <!-- /container --> <script src="js/classie.js"></script> <script src="js/stepsForm.js"></script> <!-- this is the script that will replace the one in the sample.js --> <script> var theForm = document.getElementById('theForm'); new stepsForm(theForm, { onSubmit: function(form) { classie.addClass(theForm.querySelector('.simform-inner'), 'hide'); var name = $("#q1").val(); var email = $("#q2").val(); var number = $("#q3").val(); var message = $("#q4").val(); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", url: "form-process.php", data: JSON.stringify({ name: name, email: email, number: number, message: message }), success: function(response) { var data = response.d; var messageEl = theForm.querySelector('.final-message'); messageEl.innerHTML = 'Thank you! We\\'ll be in touch.'; classie.addClass(messageEl, 'show'); } }); } }); </script> 

sample.php

  $EmailTo = "mail@mail.com"; $Subject = "New Message Received"; // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $name; $Body .= "\\n"; $Body .= "Email: "; $Body .= $email; $Body .= "\\n"; $Body .= "Phone Number: "; $Body .= $number; $Body .= "\\n"; $Body .= "Message: "; $Body .= $message; $Body .= "\\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From:".$email); // redirect to success page 

因此，此過程的步驟是從html獲取輸入，使用ajax（js）處理它，然后將其發送到sample.php進行郵寄，對嗎？ 但我似乎無法通過ajax進程或sample.php。 我的代碼導致空白頁，沒有外發電子郵件。

由於我是php和js的新手，所以我主要對源進行反向工程以使其適合我。 這次，我采用了codrops的“極簡主義形式接口”。

這也是我在SO上的第一篇文章，所以請保持溫柔:)

Answer 1

您選擇了一個非常復雜的示例。 這是要學習的更簡單的AJAX聯系表。

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"></script>

<!--  Whatever code you have above the contact form  -->

<!--  A very simple contact form -->
<div id="frmContact">
    Name: <input id="name" type="text" />
    Email: <input id="email" type="text" />
    Comment: <textarea id="comment" rows="4" cols="40"></textarea>
    <button id="mybutt">Send</button>
</div>

index.js

$(document).ready(function(){
    $('#mybutt').click(function(){
        var na = $('#name').val();
        var em = $('#email').val();
        var cm = $('#comment').val();

        if (na=='' || em=='' || cm==''){
            alert("Please complete all fields");
            return false;
        }

        $.ajax({
            type: 'post',
             url: 'your_php_ajax_file.php',
            data: 'na='+na+'&em='+em+'&cm='+cm,
            success: function(d){
                if (d.length) alert(d);
            }
        }); //END ajax
    }); //END #mybutt.click
});

your_php_ajax_file.php

<?php

    function sanitize($data) {
        return htmlentities(strip_tags(mysql_real_escape_string($data)));
    }

    // sanitize your inputs 
    $na = sanitize($_POST['na']);
    $em = sanitize($_POST['em']);
    $cm = sanitize($_POST['cm']);

    $dt = date('Y-M-d H:i:s');

    $body = '
        <div style="width:100%;text-align:center;margin:0 0 30px 0;font-family:Arial;font-size:30px;font-weight:bold;">Website Contact Form</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$dt.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$na.'</div>
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$em.'</div>
        <hr style="color:#cccccc;">
        <div style="text-align:left;margin:10px 0;font-family:Arial;font-size:22px;">'.$cm.'</div>
    ';


    $headers = "";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
    $headers .= "From: website@example.com\n";
    $headers .= "Organization: example.com\n";
    $headers .= "X-Priority: 3\n";
    $headers .= "X-Mailer: PHP". phpversion() ."\n" . PHP_EOL;
    $msg = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">';
    $msg .= $body;

    mail($to, $subject, $msg, $headers);
    mail('youremail@hotmail.com', 'Contat form', $msg, $headers);

    echo 'Contact form sent';

---

關於AJAX，以下是一些不錯的帖子，可幫助您了解AJAX的基本知識：

一個簡單的例子

更復雜的例子

根據下拉列表1中的選擇填充下拉列表2

注意：請注意，PHP AJAX processor代碼不能屬於您要從中調用的同一PHP文件（例如index.php）的一部分（否則它將無法正常工作，並且整個頁面將作為“ ajax響應”）