如何将变量从服务器端返回到客户端脚本？答案

【问题标题】：How do I return variables from serverside back to the clientside script?如何将变量从服务器端返回到客户端脚本？
【发布时间】：2020-08-11 10:57:38
【问题描述】：

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

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

编辑：我改写了这个问题；太多的答案和 cmets 陷入了无关紧要的为什么，或者尝试提出“其他方法”，这不是我所问的，而不是仅仅坚持如何。

【问题讨论】：

这将取决于提交的值，那么为什么需要服务器响应？
AJAX 提交？回复后使用location = 'someURL.php'。
@PHPglue 它是一个插件，所以我们无法完全控制 JS 代码
@TemaniAfif 重定向url有参数需要服务器计算。提交的值是计算的基础。
你可以在listerner的JS里面做这个计算，不是吗？我知道这可能不安全，但如果治疗则取决于类型

标签： javascript php wordpress contact-form-7

【解决方案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 );

【讨论】：

【解决方案2】：

他们说

最简单的方法是利用 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'];
}

您必须添加您的 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);

【讨论】：

是的，这正是问题所在。没有可用的必要数据，也无法提供。
@SimonJosefKok 刚刚向您展示了如何使其可用 :)
你做到了？您不是刚刚说：“但他们不提供对服务器响应的任何访问权限。”？也许我现在太累了：D
问题不在于无法访问插件文件，而是修改第三方插件文件是一种不好的做法。我不这样做。首先发送第二个请求有点违背使用插件的目的，因为它需要它自己的服务器端验证机制和整个shebang。但是，嘿，无论如何我感谢您的帮助。 :)
如果您操作付款并使用类似的插件，那么您已经遇到了比修改第 3 方文件更大的问题 :)）但是，我对第二个 ajax 调用的更新应该可以解决您的问题，而无需更改任何第 3 方文件。

【解决方案3】：

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

【讨论】：

终于很高兴看到有人将人们引向了正确的道路。但是过滤器挂钩名称略有变化。它是wpcf7_feedback_response。不过函数签名是一样的。

【解决方案4】：

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

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

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

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

【讨论】：