0

嘿伙计们，我正在尝试制作一个人们可以联系我的联系表格。

我想要的是人们可以填写的内容，如果他们单击“发送”，他们会收到“邮件已发送”之类的消息，这样他们就不会被重定向到 PHP 站点。

不幸的是，它对我不起作用。如果我单击“发送”，它会向我显示脚本。所以我不确定AJAX代码是否正确。有人可以帮我吗？

$(document).ready(function()    {
        $("#kontakt").submit(function() {
                if($("von").val() == "" || $("mail").val() == "" || $("nachricht").val() ==""){
                    $("#response").html("bitte fülle alle felder aus!");
                    } else  {
                        $("#response").("Lade...");
                        $.ajax({
                            type:"POST",
                            url:"senden.php",
                            data:"von=" + $("von").val() + "&mail=" + $("mail").val() + ="&nachricht=" + $("nachricht").val(),
                            success: function (msg)
                            {
                            $("#response").html(msg);
                            }
                        );
                    });
                }
            return false;
            });

        });

<form method="post" action="senden.php" id="kontakt">
            <h3 class="title">Nur nicht sch&uuml;chtern !</h3>
            <input type="text" name="von" placeholder="Name" id="von">
            <input type="text" name="mail" placeholder="E-mail" id="mail">
            <textarea name="message" placeholder="Nachricht" id="nachricht"></textarea>
            <input id="submit" type="submit" value="senden"></submit>
            </form>
            <div id="response"></div>

我也把它放在 jsFiddle http://jsfiddle.net/PqKFb/

4

2 回答 2

1

工作演示

由于您使用的是 ajax ，因此无需刷新页面即可

这是编辑后的代码

HTML

<form method="post" id="kontakt">
     <h3 class="title">Nur nicht sch&uuml;chtern !</h3>

    <input type="text" name="von" placeholder="Name" id="von">
    <input type="text" name="mail" placeholder="E-mail" id="mail">
    <textarea name="message" placeholder="Nachricht" id="nachricht"></textarea>
    <input id="submit" type="button" value="senden">
    </submit>
</form>
<div id="response"></div>

更正了代码中的错误，使用起来会更好$('#kontakt').serialize()，它会自动获取数据

代码

    $(document).ready(function () {
    $("#submit").click(function () {
        if ($("#von").val() == "" || $("#mail").val() == "" || $("#nachricht").val() == "") {
            $("#response").html("bitte fülle alle felder aus!");
        } else {
            $("#response").html("Lade...");
            $.ajax({
                type: "POST",
                data: $('#kontakt').serialize(),
                url: "senden.php",
                success: function (msg) {
                    alert(msg);
                    $("#response").html(msg);
                }

            });
        }

    });

});

发送文件

<?php

$data=$_POST['serialize'];
$von=$data['von'];  //access data like this

?>

希望这有帮助，谢谢

于 2013-09-10T15:08:07.287 回答
0

您的 javascript 中似乎有一些错误，我已经修复了这些错误，它似乎正在工作。

http://jsfiddle.net/PqKFb/8/

    $(document).ready(function () {
        $("#kontakt").submit(function () {
            if ($("von").val() == "" || $("mail").val() == "" || $("nachricht").val() == "") {
                $("#response").html("bitte fülle alle felder aus!");
            } else {

                $.ajax({
                    type: "POST",
                    url: "senden.php",
                    data: "von=" + $("von").val() + "&mail=" + $("mail").val() + "&nachricht=" + $("nachricht").val(),
                    success: function (msg) {
                        $("#response").html(msg);
                    }
                });
            }

            return false;
        });

    });

在提交事件中返回 false 时，即使您指定了操作页面，它也不应该实际提交表单。

于 2013-09-10T15:26:19.017 回答