我想在不刷新页面的情况下提交我的联系人

Question

我的网站上有一个发送电子邮件的联系表。我希望它在提交时不要刷新页面，但要发送电子邮件和成功消息。我的表格是这样的

<form method="post" id="contactform" enctype="multipart/form-data">
<input class="contactusfeild" style="width:222px;" name="sendername"  type="text" placeholder="Your Name" required>
<input class="contactusfeild" name="senderemail" style="width:222px;"  type="email" placeholder="Your Email" required >
<textarea name="sendermessage" class="contactusfeild" type="text" placeholder="Your Message Here" style="width:220px; max-width:220px; height:100px; max-height:100px; padding-top:10px;" required ></textarea>
<input  class="button"  style="border:none;" type="reset"  value="Clear" /><input  name="contactcozmuler" class="button" style="border:none; margin " type="submit"  id="submit_btn" value="Send" />
</form>

Answer 1

使用 ajax 发布。请参阅example 和 jQuery 文档：.post() , .ajax()

Answer 2

首先要做的事情。

您不能使用 ajax 上传文件，但如果您将为此使用 3rd 方脚本。

您可以使用jQuery轻松提交表单而无需刷新页面。

我写这个例子是为了清楚谁在搜索这个问题。

如果你想让所有的表单都使用ajax提交那么你只能定义'form'标签作为jquery选择器。

<script type="text/javascript">

//Call Document load
$(function(){

    // Find form elements to use ajax with
    $targetForms = $('form.ajax'); // In here, we are selecting forms that only has ajax class

    // By using submit function, you can use html5 required validation.
    // If you want to on click with buttons, html5 validation will not work.
    $targetForms.submit(function(){
        var $this = $(this); // This is now your form element.

        $.ajax({
            url: $this.attr("action"), //Where do you want to make request?
            type: $this.attr("method"), //Which method will use for request POST or GET?
            dataType: "html",
            data: $this.serialize(), // Collect all form data
            beforeSend: function(){
                // You can define what will happen just when before request.
            },
            success: function(response){,
                /* Lets think here what we can return and which type data will be. 
                   For example if you will return a string and then dataType must be choose HTML. 
                   If message successfully sent to email or recorded to db, you can send here a string like "sent". 
                   Or if error occures, you can send here a string like "error". We will use this strings in this example.
                */

                if(response == "sent") {
                    // Animate your form to height:0 and show a div that have message for visitor.

                } else if(response == "error")) {
                    alert("Hey! Something bad happened!");
                }
            },
            error: function(){

            }
        });

        return false;
    });
});
</script>