如何將變量從服務器端返回到客戶端腳本？

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

但是我的更改似乎對事件對象包含的數據沒有影響。 我很難找到響應（如果有）的確切位置以及應用的過濾器或操作。

編輯：我改寫了這個問題； 太多的答案和評論陷入了無關緊要的原因中，或者嘗試建議“其他方法”，這不是我所問的，而不僅僅是堅持如何。

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

他們說

最簡單的方法是利用 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);

Answer 3

好吧，我設法找到了我要找的東西。 對服務器的 AJAX 請求實際上只返回三個變量，例如：

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

所以沒有運氣。 沒有鈎子或過濾器來修改響應服務器端，添加更多變量。 即使有辦法，客戶端 javascript 的編碼方式也不是很容易覆蓋單一方法來實現我想要的功能。 它需要數百行的丑陋復制面食來改變一些小事情。

因此，我的結論是，這是不可行的，至少現在不行，除非插件作者決定進行一些可以適應這種功能的更改，眨眼。 我將自己實現一個表單處理操作。 這樣工作量會少一些。

Answer 4

我遇到了同樣的問題，上面的答案都沒有幫助。 其實這是可行的，你可以按照下面的代碼（將其添加到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 。