Question

我在最近转换为wordpress网站的网站上有一个ajax联系表单。联系表格工作正常，直到我将其转换为wp网站。现在它只是将您输入的信息输入到输入中并使用它创建一个新页面。我知道它发生了什么，不知道从哪里开始。

有关此类事件和/或任何解决方案的任何经验吗？

Answer 1

我不确定如何在Wordpress或jQuery中完成任务，但我认为你的javascript函数需要稍微更改一下，代码需要理想地在<head></head>部分。

jQuery(document).ready(function($) {

    $("#ajax-contact-form").submit( function( event ) {
        /* Prevent the form actually submitting in standard manner */
        event.preventDefault();

        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "/includes/contact-process.php",
            data: str,
            success: function(msg) {
                // Message Sent? Show the 'Thank You' message and hide the form
                if(msg == 'OK') {
                    result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
                    $("#fields").hide();
                } else {
                    result = msg;
                }
                $('#note').html(result);
            }
        });
        return false;
    });
});

并且，您需要在ajax函数中使用的路径也需要更改 - 已在上面进行了编辑。（我刚刚尝试时得到了404）

Answer 2

如果您查看控制台（在页面上查看源代码），表单ajax的jQuery就会出现在页面顶部，因此jQuery库正在加载之后你已经宣布了这个功能。应该在<head>和结束之后登陆加载jQuery库：

....etc...
<script type="text/javascript" src="http://www.spincycleprodcution.com/wp-content/themes/spincycle/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">                                 
// we will add our javascript code here
jQuery(document).ready(function($) {

    $("#ajax-contact-form").submit(function() {
        var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "includes/contact-process.php",
            data: str,
            success: function(msg) {
                // Message Sent? Show the 'Thank You' message and hide the form
                if(msg == 'OK') {
                    result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
                    $("#fields").hide();
                } else {
                    result = msg;
                }
                $('#note').html(result);
            }
        });
        return false;
    });
});
</script>
</head>

您当前的控制台错误是：

ReferenceError：无法找到变量： jQuery（匿名函数）

因为在加载jQuery库之前加载了函数，所以它无法找到jQuery。你甚至可以在页脚中加载你的ajax ....或者在jQuery库之后的任何地方。

一旦你有AJAX工作，你需要确保ajax可以找到引用页面：

contact-process.php

或者您收到此错误：

[错误]无法加载资源：服务器响应状态为404（未找到）（contact-process.php，第0行）

联系表格带您到新页面

2 个答案: