MODx RevolutionでAjaxリクエストを処理する非常に簡単な方法

こんにちは、MODx Revolutionのサイトのフロントエンドへのajaxリクエストの処理については既に多くのことが書かれています 。 既製のアドオンもあります 。

次に、MODx Revolutionでajaxリクエストを処理する別の非常に簡単な方法を提供したいと思います。



最初に、次の内容のajaxReqeustというプラグインを作成します。

<?php if ($modx->event->name == 'OnLoadWebDocument') { if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $modx->resource->set('cacheable', 0); $modx->resource->set('template', 0); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインは、OnLoadWebDocumentシステムイベントで起動する必要があります。

このプラグインを使用すると、リソースに対してajaxリクエストを実行し、テンプレートなしで応答としてコンテンツのみを受信できます。

必要なのは、目的のスニペットまたはチャンクをリソースのコンテンツに保存することだけです。



例として、ajaxリクエストを介して送信されたフォームを処理するプロセスを考えます。



任意のデータを使用して新しいリソースを作成し、コンテンツフィールドにFormItスニペットの標準呼び出しを入力します。

 <div id="feedback_form"> <h2>  </h2> [[!request? &k=`success` &toPlaceholder=`success`]] [[+success:is=``:then=` [[!FormIt? &hooks=`email,redirect` &redirectTo=`[[*id]]` &redirectParams=`{"success":"1"}` &emailTpl=`feedbackEmailTpl` &emailSubject=`    [[++site_name]]` &emailTo=`info@unicontent-studio.ru` &emailFrom=`noreply@unicontent-studio.ru` &emailFromName=`[[++site_name]]` &validate=` name:required:stripTags, email:email:required, message:required:stripTags ` &clearFieldsOnSuccess=`1` &validationErrorMessage=`    .` ]] <form data-target="#feedback_form" class="ajax-form" action="[[~[[*id]]]]" method="POST"> <div> <label>:</label> <input type="text" value="[[!+fi.name]]" name="name" /> [[!+fi.error.name]] </div> <div> <label>E-mail:</label> <input type="text" value="[[!+fi.email]]" name="email" /> [[!+fi.error.email]] </div> <div> <label>:</label> <textarea name="message">[[!+fi.message]]</textarea> [[!+fi.error.message]] </div> <input type="submit" name="submit" value="" /> </form> `:else=` <p>   .</p> `]] </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

requestという小さなスニペットを作成してみましょう。これにより、フォームが正常に送信された場合にメッセージを表示できます。

 <?php $result = isset($_REQUEST[$k])? strip_tags($_REQUEST[$k]) : ''; if (!empty($toPlaceholder)) { $modx->toPlaceholder($toPlaceholder, $result); } else { return $result; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

あとは、フォームが表示されるページに小さなjQueryコードを接続するだけです。

このスクリプトは、ajax要求を介してフォームを送信し、受信した応答を処理します。

 $(document).ready(function() { $('body').on('submit', '.ajax-form', function(e) { e.preventDefault(); var target = this; if ($(this).data('target') != undefined) { target = $(this).data('target'); } values = $(this).serializeArray(); $(this).find('input[type="submit"]').attr('disabled', 'disabled'); $.ajax({ type: 'POST', dataType: 'html', url: $(this).attr('action'), data: values, success: function(data) { $(target).replaceWith(data); } }); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おそらくこれで終わりです。

他に何もする必要はありません。追加のスクリプト、コネクタ、プロセッサ、1つの小さなプラグインだけで、MODxが残りを処理します。

チャンクとスニペットは、通常のリクエストと同じ方法で処理されます。つまり、MODxタグを処理するためにハックは必要なく、回答はパーサーによって既に処理されています。

それだけです。私の小さな記事が誰かの生活を少し楽にしてくれることを願っています。

みなさん、幸運を祈ります。