在联系人上使用AJAX-Form WordPress方式

时间:2017-03-22 作者:emcolsson

我在理解和实现AJAX的WP方式时遇到了很大的问题。我有一个“正常”的设置,只是在提交表单时,页面会用额外的页眉/页脚复制自己,这可能是必须的,我没有在wp的每个方面都这样做。叹气我真的很高兴它能正常运行,现在我必须用不同的方法重做它。

嗯,我知道我应该排队并本地化我的js,我已经在我的函数中完成了这项工作。php-这样可以吗?至少它已加载,但我以后无法完全使用它。我还知道本地化允许我使用管理ajax。应该使用php来完成此操作。是的,到目前为止还不错。我可以看到它已正确加载,并且具有指向管理ajax的正确路径。php检查我的页面时。

这就是我迷路的地方。我不知道该把什么代码放在哪里。我已经花了好几个小时试图重新排列代码,但我并没有走得更远。

这就是我目前拥有的-我应该怎么做?

解析器。php

   <?php

if ( isset($_POST[\'name\']) && isset($_POST[\'mail\']) && isset($_POST[\'message\']) ) {
    $name = $_POST[\'name\'];
    $mail = $_POST[\'mail\'];
    $message = nl2br($_POST[\'message\']);
    $to = "[email protected]";
    $from = $mail;
    $subject = \'Kontaktformulär från emcolsson.se ifyllt\';
    $message = \'<b>Name:</b> \'.$name.\' <br><b>Email:</b> \'.$mail.\' <p>\'.$message.\'</p>\';
    $headers = "From: $from\\n";
    $headers .= "MIME-version: 1.0\\n";
    $headers .= "Content-Type: text/html; charset=utf-8\\n"; //Fixes ÅÄÖ in Sender name and Message


    if( mail($to, \'=?UTF-8?B?\'.base64_encode($subject).\'?=\', $message, $headers) ) { //Fixes ÅÄÖ in subject
        echo "success";
    } else {
        echo "The server failed to send the message. Please try again later.";
    }
}
联系人表单。js公司:

function _(id) {
    return document.getElementById(id); //makes _ a shortcode for document.getElementById(id)
}

function submitForm() {
        _("submitButton").disabled = true; //User cant click submit many times and resend form data, after first click its disabled.
        _("status").innerHTML = \'please wait...\'; //Gives span value and the user an indication of that data is being processed.
        var formdata = new FormData(); // Creates variable that fetches they key value pair of id and value of  the form inputs.
        formdata.append( "name", _("name").value );
        formdata.append( "mail", _("mail").value );
        formdata.append( "message", _("message").value );
        var ajax = new XMLHttpRequest(); // creating an ajax variable which is a XMLHttpRequest, opens it/fires it by posting the formdata to parser.php
        ajax.open( "POST", "parser.php" );
        ajax.onreadystatechange = function() { //when ready do this function
            if(ajax.readyState == 4 && ajax.status == 200) { //when data is finished processing by php and data is returned by php to this ajax object(XMLHttpRequest)
                if(ajax.responseText == "success") {
                _("contact-form").innerHTML = \'<h2>Thanks for contacting me \'+_("name").value+\' I will get back to you as soon as possible.</h2>\';
                _("status").innerHTML = ajax.responseText;
            } else {
            _("status").innerHTML = ajax.responseText;
            _("submitButton").disabled = false; 
            clearForm();            
            } 
        }
    }
    ajax.send( formdata );

}
功能。php

wp_enqueue_script( \'contactform\', get_template_directory_uri() . \'/js/contactform.js\', array( \'jquery\' ), 1.1, true );
include_once( get_template_directory() . \'/includes/parser.php\' );

1 个回复
SO网友:scott

EDIT

TL;DR
您的页面正在刷新,因为您告诉表单加载新页面(下指定的页面action).

Longer answer
页面刷新的原因是您的表单具有action 与之关联。当我昨天查看您的页面时,我看到AJAX例程完成了,然后页面刷新了。为什么?因为在AJAX完成之后(甚至在它完成之前),表单被发送到下面指定的文件action. 如果不想刷新页面,请不要使用HTML表单。只需输入字段并将按钮单击与AJAX函数绑定即可。这有意义吗?

END EDIT

首先,我想了解Wordpress建议AJAX是如何实现的。https://codex.wordpress.org/AJAX_in_Plugins

其次,我想知道您是否需要AJAX。AJAX用于访问数据库,而无需重新加载页面。例如,在谷歌搜索栏中,键入内容时会得到建议。这是AJAX。

但是,提交重新加载带有“感谢”消息的页面的表单是not 使用AJAX的目的。使用常规CGI处理表单的方式有所不同(在Wordpress中,您可以使用纯PHP进行处理)。如果在此上下文中使用AJAX,则无需增加复杂性。

这有意义吗?只需将表单操作设置为一个php文件,该文件收集表单数据,将其存储在数据库中,并使用所需消息编写一个新页面。

相关推荐

无法使用AJAX访问数据库中的数据

我正试图在wordpress中首次调用AJAX。我遵循了一些教程,到目前为止已经达到了这一点。但当我试图安慰的时候。将从数据库中获取的数据记录在AJAX调用中,我发现以下错误:未捕获引用错误:未定义数据代码:功能。phpfunction my_ajax_handler(){ global $wpdb; $name = $wpdb->get_results(\"SELECT * FROM username\"); echo $name;