Question

我尝试制作一张AJAX表单，只需点击一下，即可触发URI：＆＃39; / send / contact＆＃39;我使用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>

但是，它没有给出任何回应。我点击它，它一直处于空闲状态，好像它只是一些图像。知道为什么吗？我检查了数据库，没有任何变化。它也不会丢弃任何验证检查或其他任何内容。

Answer 1

你的代码完美无瑕，但你在这一行中有一个错字。

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

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

Answer 2

尝试使用提交函数末尾的return false;代替event.preventDefault();

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

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

$("#result").html(content);也应该足以取代其内容。

Answer 3

没关系，这是一个简单的修复。我的PHP代码需要类似$_POST['fullName'];的内容，因此必须将sender: sender,更改为fullName: fullName,并更改我使用单词sender.的位置

使用AJAX和PHP提交联系表单

3 个答案: