Question

我对PHP非常强大，但javascript对我来说是全新的。

我需要为我的项目添加各种ajax功能，例如表单验证等。

我已经做了一些搜索，观看了一些教程，并提出了一个基本的工作示例，如下所示：

的index.php：

<!DOCTYPE html>
<html lang="en">
<head>

<title>Ajax form test</title>

<style>
    form input, form textarea {
        display:block;
        margin:1em;
    }

    form label {
        display:inline;
    }

    form button {
        padding:1em;
    }
</style>
</head>
<body>

<h2>CONTACT FORM</h2>

<div id="form_content">
    <form method="post" action="server.php" class="ajax">

            <label for="name" value="name">name:</label>
            <input type="text" name="name" placeholder="name" />

            <label for="email" value="email">email:</label>
            <input type="email" name="email" placeholder="email" />

            <label for="message" value="message">message:</label>
            <textarea name="message" placeholder="message"></textarea>

            <input type="submit" value="send">

    </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>

</body>
</html>

main.js：

$('form.ajax').on('submit', function() {

console.log('trigger');

var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();

        data[name] = value;
    });

$.ajax ({

    url:    url,
    type:   type,
    data:   data,
    success: function(response) {
        console.log(response);
        $('#form_content').load('server.php', data);
    }

});

return false;
});

最后，server.php：

<?php

if (isset($_POST) AND $_POST['name'] !='' AND $_POST['email'] !='' AND $_POST['message'] !='')
{
?>
<h4>Your data was submitted as follows</h4>

<br />name: <?=$_POST['name']?>
<br />email: <?=$_POST['email']?>
<br />message: <?=$_POST['message']?>

<?php
} else {
?>
<h3>please fill in all form data correctly:</h3>

<form method="post" action="server.php" class="ajax">

        <label for="name" value="name">name:</label>
        <input type="text" name="name" placeholder="name" />

        <label for="email" value="email">email:</label>
        <input type="email" name="email" placeholder="email" />

        <label for="message" value="message">message:</label>
        <textarea name="message" placeholder="message"></textarea>

        <input type="submit" value="send">

</form>

<?php
}

这一切都运行正常，因为如果我输入所有表单数据并单击提交，则会发生ajax魔法并获得数据确认。此外，如果未加载所有数据，则表单将重新显示在页面上。问题是在这种情况下，继续填写表单数据然后提交它加载server.php页面而不是重复ajax调用，直到表单数据有效..

我确信有更好的方法可以做到这一点，因为这是我的第一次尝试，但我无法通过搜索此处或谷歌找到任何解决方案，但这可能主要是因为我真的不知道要搜索什么。在正确提交表单之前，如何才能使第一个实例中的行为可重复？

Answer 1

这是因为您在form来电期间删除了load()元素，并使用新版本的表单覆盖了该元素。因此，所有附加的事件处理程序将随之消失。

您需要在不会更改的元素上使用委托：

$('#form_content').on('submit', 'form.ajax', function() {...});

说明：

在上面的示例中，您将事件侦听器附加到#form_content元素。但是，它只会监听来自form.ajax submit事件的事件。现在，如果用新版本替换form，现有的处理程序将附加在链中较高的位置（在未被替换的元素上）并继续侦听来自较低元素的事件，无论是否他们改变与否......因此它将继续发挥作用。

Answer 2

您的主要问题是您在PHP方面验证表单，当您应该在客户端验证它时 - 然后，而不是返回适当的响应并继续在客户端上进行处理方面，你正在完成PHP方面的处理。史蒂夫的答案（上图）适用于你所看到的。

至于你采取的方法，最好不要使用<form>构造，因为使用AJAX你通常不需要。在我看来，<form>是一个古老的结构，在AJAX时代并不常见。请注意您必须将{AJ}阻止后的return false添加到abort the default form functionality - 以阻止其将用户发送到server.php？那应该告诉你一些事情。

以下是构建它的另一种方法：

HTML：

<body>

<h2>CONTACT FORM</h2>

<div id="form_content">
    <label for="name" value="name">name:</label>
    <input type="text" name="name" placeholder="name" />

    <label for="email" value="email">email:</label>
    <input type="email" name="email" placeholder="email" />

    <label for="message" value="message">message:</label>
    <textarea name="message" placeholder="message"></textarea>

    <input type="button" id="mybutt" value="send">
</div>
<div id="responseDiv"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>

</body>

JAVASCRIPT / JQUERY：

$(document).ready(function() {

    //Next line's construction only necessary if button is injected HTML
    //$(document).on('click', '#mybutt', function() {

    //Otherwise, use this one:
    $('#mybutt').click(function() {
        console.log('trigger');

        var valid = "yes";

        var that = $(this),
            url = "server.php",
            type = "POST",
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
                if (value=="") valid = "no";

            data[name] = value;
        });

        if (valid == "yes") {
            $.ajax ({
                url:    url,
                type:   type,
                data:   data,
                success: function(response) {
                    console.log(response);

                    $('#responseDiv').html(response);

                    /* OPTIONALLY, depending on what you make the PHP side echo out, something like:

                    if (response == "allgood") {
                        window.location.href = "http://www.google.com";
                    }else{
                        //this is how you would handle server-side validation
                        alert('Please complete all fields');
                    }

                    */
                }
            }); //END AJAX
        }else{
            alert('Please complete all fields');
        }

    }); //END button.click


}); //END document.ready

PHP方面： server.php

<?php

    if (isset($_POST) AND $_POST['name'] !='' AND $_POST['email'] !='' AND $_POST['message'] !='') {
        $r = '';
        $r .= "<h4>Your data was submitted as follows</h4>";
        $r .= "<br />name: " . $_POST['name'];
        $r .= "<br />name: " . $_POST['email'];
        $r .= "<br />name: " . $_POST['message'];

    } else {

        $r = "Please complete all form fields";

    }

    echo $r;

新手ajax（jquery）问题

2 个答案: