php-新手ajax(jquery)问题

我对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调用直到表单数据有效为止.

我敢肯定,这是我的第一次尝试,这是一种更好的方法,但是我一直无法通过在此处或在google上搜索找到任何解决方案,但这可能主要是因为我真的不知道要搜索什么对于.在正确提交表单之前,如何使第一个实例中的行为可重复？

解决方法:

发生这种情况是因为在load()调用期间要删除表单元素,并使用新版本的表单覆盖它.因此,所有附加的事件处理程序将随之消失.

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

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

说明：

在上面的示例中,您将事件侦听器附加到#form_content元素.但是,它仅侦听从form.ajax提交事件冒泡的事件.现在,如果您用新版本替换表单,则现有处理程序将附加在链中的较高位置(在未替换的元素上),并继续侦听来自较低元素的事件,无论它们是否更改…因此它将继续工作.

php-新手ajax(jquery)问题

相关文章