3

我很擅长 PHP，但 javascript 对我来说是全新的。

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

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

索引.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>

主.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 调用，直到表单数据有效..

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

4

2 回答 2

3

发生这种情况是因为您在通话form期间删除了元素load()并用新版本的表单覆盖它。因此，所有附加的事件处理程序将随之消失。

您将需要在不变的元素上使用委托：

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

解释：

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

于 2013-09-13T17:01:58.723 回答
0

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

至于您采用的方法，最好根本不使用<form>构造，因为使用 AJAX 您通常不需要。在我看来，<form>是一种古老的结构，在 AJAX 时代并不经常需要。请注意您必须如何添加return false以下 AJAX 块以中止默认表单功能- 阻止它发送用户到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;
于 2013-09-13T17:44:02.720 回答