我如何 return 从服务器端返回客户端脚本的变量？

Question

我找到了插件作者的这篇文章：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.';
}

但我的改动似乎对事件对象包含的数据没有影响。我很难找到响应（如果有）的确切制定位置以及适用的过滤器或操作。

编辑： 我改写了问题；太多的答案和评论卡在 why 中，这是无关紧要的，或者尝试建议 "other approaches"，这不是我问的，而不仅仅是坚持如何.

Answer 1

你可以试试这个：

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 );

Answer 2

他们说

The simplest way is utilizing Contact Form 7’s custom DOM event to run JavaScript. The following is an example of script that redirects you to another URL when the wpcf7mailsent event occurs:

<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'];
}

您必须添加您的 url 逻辑，例如：

$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);

Answer 3

好吧，我设法找到了我要找的东西。 AJAX向服务器请求returns实际上只有三个变量，eg：

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

所以运气不好。没有钩子或过滤器来修改响应服务器端，添加更多变量。即使有办法，客户端 javascript 的编码方式也不会很容易覆盖单一方法来实现我想要的功能。它需要一个数百行的丑陋复制意大利面来改变一些小东西。

因此我的结论是，这是不可行的，至少目前不可行，除非插件作者决定进行一些更改以适应此类功能，眨眼。我将自己实现一个表单处理操作。这样工作量会减少。

Answer 4

我遇到了同样的问题，上面 none 的答案很有帮助。其实这是可行的，你可以按照下面的代码（添加到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 );

顺便说一句，您可能希望按照某些答案中的建议在 wpcf7submit 上使用事件 wpcf7mailsent，因为 wpcf7mailsent 只有在成功提交表单时才会触发（例如所有必填字段均已正确填写），但 wpcf7submit.

并非如此

我如何 return 从服务器端返回客户端脚本的变量？

How do I return variables from serverside back to the clientside script?

javascript

php

wordpress

contact-form-7