使用AJAX和PHP提交联系人表单

Submitting a contact form using AJAX and PHP

本文关键字：联系人 表单 提交 PHP AJAX 使用      更新时间：2023-09-26

我想做一个AJAX表单，点击一下，触发URI: '/send/contact'，我使用https://github.com/Nikic/FastRoute进行路由，这就是我定义路由的方式:

['POST', '/send/contact', ['HassanAlthaf'PersonalWebsite'Controllers'ContactTool', 'submitForm']],

这是运行的方法:

public function submitForm()
{
    $sender = $this->httpRequest->getParameter('fullName');
    $email = $this->httpRequest->getParameter('email');
    $subject = $this->httpRequest->getParameter('subject');
    $message = $this->httpRequest->getParameter('message');
    $ipAddress = $this->httpRequest->getIpAddress();
    $result = $this->contactFormService->saveForm($sender, $email, $subject, $message, $ipAddress);
    if ($result === true) {
        $this->httpResponse->setContent("<div id='"content'"><div class='"success'">You have successfully sent the message.</div></div>");
    } else {
        $this->httpResponse->setContent("<div id='"content'">" . json_encode($result) . "</div>");
    }
}
处理表单的jQuery代码: 
$("#contact-form").submit( function(event) {
    event.preventDefault();
    var $form = $(this),
        sender = $form.find('input[name="fullName"]').val(),
        email = $form.find('input[name="emmail"]').val(),
        subject = $form.find('input[name="subject"]').val(),
        message = $form.find('textarea[name="message"]').val(),
        url = $form.attr('action');
    var posting = $.post(url, {
        sender: sender,
        email: email,
        subject: subject,
        message: message
    });
    posting.done( function(data) {
        var content = $(data).find('#content');
        $("#result").empty().append(content);
    });
});

最后，我的表单HTML代码:

                <form class="contact-form" method="post" action="send/contact" id="contact-form">
                    <input type="text" name="fullName" class="input-field" placeholder="Your full name" maxlegth="50" required>
                    <input type="email" name="email" class="input-field" placeholder="Your email" maxlength="100" required>
                    <input type="text" name="subject" class="input-field" placeholder="Subject" maxlength="75" required>
                    <textarea rows="4" type="text" name="message" class="input-field text-area" placeholder="Your message" maxlength="2000"></textarea>
                    <input type="submit" name="send" value="Send Message" class="button">
                </form>

但是，它没有给出任何响应。我点击它，它就像一张图片一样闲置着。知道为什么吗?我查了数据库，没有变化。它也不会抛出任何验证检查或任何东西。

您的代码工作得很完美，但是这一行有一个错别字。

 email = $form.find('input[name="emmail"]').val(),<--- 2 m
 email = $form.find('input[name="email"]').val(),<--- should be

测试了表单，它按预期从服务器返回数据。

尝试在提交函数的末尾使用return false;而不是event.preventDefault();

如果这不起作用，请使用console.log(data);，这样您将在控制台中获得响应。

另外，为什么不使用$("form").serialize();从输入生成查询字符串?

$("#result").html(content);也应该足够，因为它替换了它的内容。

没关系，这是一个简单的修复。我的PHP代码期望$_POST['fullName'];之类的东西，因此，必须将sender: sender,更改为fullName: fullName,并更改使用sender.

的地方
相关文章：