如何将服务器端的变量返回到客户端脚本?

时间:2017-09-25 21:43:32

标签: javascript php wordpress contact-form-7

我在插件作者https://contactform7.com/redirecting-to-another-url-after-submissions/找到了这篇文章,但问题是它重定向到事先已知的URL。我需要知道URL作为服务器的响应,因为重定向URL将取决于提交的值。

我可以记录事件:

document.addEventListener('wpcf7mailsent', function(event) {
    console.log(event);
}, false);

但我完全不确定服务器提供了多少数据以及客户端脚本提供了多少数据。我尝试改变这样的提交:

add_action('wpcf7_posted_data', 'alter_input');

function alter_input($data) {
    $data['your-message'] = 'Something totally different here.';
}

但我的更改似乎对事件对象包含的数据没有影响。我很难找到确切的响应(如果有的话)以及适用的过滤器或操作。

编辑:我重写了这个问题;太多的答案和评论都会陷入为什么,这是无关紧要的,或者试图建议“其他方法”,这不是我所要求的,而不仅仅是坚持如何< / em>的

4 个答案:

答案 0 :(得分:2)

你可以试试这个:

document.addEventListener( 'wpcf7submit', function( event ) {
    var inputs = event.detail.inputs;

    for ( var i = 0; i < inputs.length; i++ ) {
        if ( 'name-of-the-field' == inputs[i].name ) {
            //make your test on inputs[i].value and rediret
        }
    }
}, false );

答案 1 :(得分:1)

他们说

  

最简单的方法是使用Contact Form 7的自定义DOM事件来运行   JavaScript的。以下是将您重定向到另一个脚本的脚本示例   发生wpcf7mailsent事件时的URL:

<script>
 document.addEventListener( 'wpcf7mailsent', function( event ) {
     location = 'http://example.com/';
 }, false );
</script>

但他们不提供对服务器响应的任何访问权。

唯一的解决方案是要求您在onSentOk javascript字符串(序列化对象)下添加服务器响应,该字符串将逐行评估。

他们在 scripts.js

中说
 if ( data.onSentOk ) {
    $.each( data.onSentOk, function( i, n ) { eval( n ) } );
 }

所以在 rest-api.php 而不是:

if ( ! empty( $result['scripts_on_sent_ok'] ) ) {
    $response['onSentOk'] = $result['scripts_on_sent_ok'];
}

你必须添加你的网址逻辑,例如:

$response['onSentOk'] = array('top.location.href="' . $cutomUrl .'";');

但同样,此插件并未设计为对服务器响应做任何事情;)

<强>更新

另一个解决方案,因为你可能无权访问插件文件,是要发出第二个ajax请求,这次是一个你自己的脚本:

 document.addEventListener('wpcf7mailsent', function(event) {
      $.ajax({
         url: 'your_scrit.php',
         data: sameData,
         success: function(response){
            // do your redirect
         }
      });
 }, false);

答案 2 :(得分:0)

好吧,我设法找到了我要找的东西。对服务器的AJAX请求实际上只返回三个变量,例如:

{
    into:"#wpcf7-f19-p59-o1",
    message:"An error occurred. Please try again later.",
    status:"mail_failed"
}

那里没有运气。没有钩子或过滤器来修改响应服务器端,以添加更多变量。即使有一种方法,客户端javascript也不会以这样的方式编码,以至于很容易覆盖奇异的方法来实现我想要的功能。它需要一个丑陋的数百行的复制面食来改变一些小东西。

因此我的判断是,这是不可行的,至少目前不是这样,除非插件作者决定进行一些可以适应这种功能的改变,眨眼眨眼。我将自己实现一个表单处理操作。那将是更少的工作。

答案 3 :(得分:0)

我遇到了同样的问题,以上答案均无济于事。实际上这是可行的,您可以遵循以下代码(将其添加到functions.php中):

add_filter( 'wpcf7_ajax_json_echo', 'filter_wpcf7_ajax_json_echo', 10, 2 );
    
function filter_wpcf7_ajax_json_echo( $items, $result ) { 
    
    $items['foo'] = 'bar';
        
    return $items;
        
};

您将可以使用以下javascript代码访问新元素:

document.addEventListener( 'wpcf7mailsent', function( event ) {

    console.log( event.detail.apiResponse.foo );

}, false );

顺便说一句,您可能希望按照某些答案中的建议在wpcf7mailsent上使用事件wpcf7submit,因为wpcf7mailsent仅在成功提交表单后才会触发(例如,所有必填项)字段已正确填充),而wpcf7submit则不是这种情况。