Question

我在一个网站的1页上遇到了一个大问题：Javascript不想被执行。

我尝试从另一个网站复制并粘贴，我已经完成了它的完美工作......但不是在这里。也许你可以帮我弄清楚它为什么不起作用......

我尝试了很多方法，没有ajax似乎在这里工作。这是其中之一，当我尝试发送邮件时，我没有得到警报，但{＆＃34;响应＆＃34;：＆＃34;邮件正确发送！＆＃34;}而是邮件被正确发送。提交按钮有效！页面很新鲜，所以我认为js没有被执行。（我希望在不刷新页面的情况下获取信息，就像正常的ajax请求一样）。

我试图将脚本（和图书馆链接）放在头脑中，没有任何改变。

这是我的代码：

 <--! Some HTML -->
        <form class="form-horizontal myForm" method="post" action="contact.php">
            <div class="form-group col-md-6">
                <input type="text" class="form-control" name="prenom" id="prenom" placeholder="First Name" pattern="[a-zA-ZÀ-ÿ._-\s]{1,30}" required>
            </div>
            <div class="form-group col-md-6" style="margin-left:14px">
                <input type="text" class="form-control" name="nom" id="nom" placeholder="Name" pattern="[a-zA-ZÀ-ÿ._-\s]{1,30}" required>
            </div>
            <div class="form-group col-md-6">
                <input type="email" class="form-control" name="email" id="email" placeholder="Mail" required >
            </div>
            <div class="form-group col-md-6" style="margin-left:14px">
                <input type="text" class="form-control" name="objet" id="objet" placeholder="Object" pattern="[a-zA-ZÀ-ÿ._-\s]{1,30}" required >
            </div>
            <div class="form-group col-md-12">
                <input type="text" class="form-control" name="message" id="message" placeholder="Your message" required>
            </div>
            <div class="form-group">    
                <label for="captcha" class="col-xs-12 col-sm-2 control-label">Captcha</label>
                    <div class="col-xs-6 col-sm-2">
                        <input type="text" class="form-control" id="captcha" name="captcha" required>
                    </div>
                    <div class="col-xs-2 col-sm-1">
                        <img src="form.php">
                    </div>
            </div>
             <div class="form-group col-md-12">
            <button type="submit" class="btn btn-default">Submit</button>
            </div>
            <div class="the-return">  </div>
        </form>
<--! Some HTML -->

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script> <!-- Gem jQuery -->
<script>            
$(document).ready(function() {
// On submit
$('.myForm').on('submit', function(e) {
    e.preventDefault(); // Prevent default submit

    var $this = $(this);

    // Getting values
    var name = $('#nom').val();
    var fname = $('#prenom').val();
    var objet = $('#objet').val();
    var mail = $('#email').val();
    var msg = $('#msg').val();

    // Looking for errors
 if(name === '' || fname === '' || objet === '' || mail === '' || msg === '') {
        alert('Les champs doivent êtres remplis');
    } else {
        // Sending Ajax query
        $.ajax({
            url: $this.attr('action'), // form's action
            type: $this.attr('method'), // form's method
            data: $this.serialize(), // Serializing data
            success: function(html) { // php's file response
                alert(html); // Print the result 
            }
        });
    }
});
});

我的php文件：

session_start();
if(isset($_GET['err']))
{
$reponse = 'Mail not sent corretly!';
echo json_encode(['reponse' => $reponse]);
echo 'An error occurred, please try again             
        <form .... /form>'; //Same form
}
if(isset($_POST["captcha"]) && $_POST["captcha"]!="" && $_SESSION["captcha"]==$_POST["captcha"])
{
    if(isset($_POST["nom"]))
    {
        if(preg_match("/^[a-zA-Z][a-zA-Z]*[a-zA-Z]$/",$_POST['nom'])) 
        {
            if(isset($_POST["prenom"]))
            {
                if (preg_match("/^[a-zA-Z][a-zA-Z]*[a-zA-Z]$/",$_POST['prenom'])) 
                {

                    if(isset($_POST["objet"]))
                    {
                        if (preg_match("/^[a-zA-Z][a-zA-Z]*[a-zA-Z]$/",$_POST['objet'])) 
                        {
                            if(isset($_POST["email"]))
                            {
                                if (preg_match("/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/",$_POST['email'])) 
                                {

                                        $passage_ligne = "\r\n";
                                        $emailAdmin = 'benjamin@parisbeaute.fr';

                                        // Subject
                                        $subject = $_POST['objet'];

                                        // Headers
                                        $headers = 'FROM: "'.$_POST['nom'].' '.$_POST['prenom'].'" <'.$_POST['email'].'>'.$passage_ligne;
                                        $headers .= 'MIME-Version: 1.0'.$passage_ligne;
                                        $headers .= 'Content-type: text/html; charset=UTF-8'.$passage_ligne;
                                        $message = $_POST['message'];
                                        // Formulaire


                                        // Fonction mail()
                                        mail($emailAdmin, $subject, $message, $headers);   
                                        echo '<div>Thanks a lot !</div>';
                                        $reponse = 'Mail sent corretly!';
                                        echo json_encode(['reponse' => $reponse]);
                                    }}}}}}}}}
?>

提前致谢，对不起我的英语不好，这不是我的母语，你可以在我的代码中看到。

Answer 1

不确定为什么它不起作用，但如果您想使用$ .ajax请求发送数据，请坚持点击事件。尝试将代码更改为：

$(document).ready(function() {
// On button click
$('#my_button').on('click', function(e) {


   var $this = $('.myForm');

   // Getting values
   var name = $('#nom').val();
   var fname = $('#prenom').val();
   var objet = $('#objet').val();
   var mail = $('#email').val();
   var msg = $('#msg').val();

 // Looking for errors
 if(name === '' || fname === '' || objet === '' || mail === '' || msg === '')  {
    alert('Les champs doivent êtres remplis');
 } else {
    // Sending Ajax query
    $.ajax({
        url: $this.attr('action'), // form's action
        type: $this.attr('method'), // form's method
        data: $this.serialize(), // Serializing data
        success: function(html) { // php's file response
            alert(html); // Print the result 
        }
    });
 }
});
});

将按钮类型更改为：

<button type="button" class="btn btn-default" id="my_button">Submit</button>

使用ajax的表单：JS不执行

1 个答案: