个人中心
gpt4 book ai didi

php - 新手 ajax (jquery) 问题

转载 作者：搜寻专家 更新时间：2023-10-31 20:42:37 25 4
gpt4 key购买 nike

我非常擅长 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 调用直到表单数据有效..

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

最佳答案

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

您需要对不会更改的元素使用委托(delegate):

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

解释:

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

关于php - 新手 ajax (jquery) 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18791447/

25 4 0
文章推荐： php - AWS S3 PHP SDK 2 Copy an object to another bucket 错误 'Bad request' 400
文章推荐： php - 在 Yii 中从多个模型创建表单
文章推荐： php - 这需要这么长时间才能完成吗？
文章推荐： php - 从类外部访问私有(private)方法
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com