Ajax PHP脚本无法正常工作 - 使用php ajax联系方框

Question

Hey guys I'm trying to make a contact form where people can contact me.

What I want want is something that people could fill, and if they click "Send", they get a message like "Mail has been sent", so that they don't get redirected to the PHP site.

Unfortunately, it's not working for me. If I click on "Send", it shows me the script. So I'm not sure if the AJAX code is correct. Could anyone help me?

$(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>

I put it also on jsFiddle http://jsfiddle.net/PqKFb/

Answer 1

Working DEMO

Since you are using ajax , do it without refreshing the page

Here is the edited code

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>

corrected the mistakes in your code, and it would be better to use $('#kontakt').serialize(),it will take the data automatically

code

    $(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);
                }

            });
        }

    });

});

senden.php

<?php

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

?>

Hope this helps,Thank you