通过AJAX

问题描述

我创建了一个函数，用于在用户注册后将选通内容注入页面。该功能通过以下流程工作：

1. 用户填写表格
2. 表单提交后，刷新页面并向URL添加唯一的哈希，以允许用户重新访问页面内容（哈希值存储为cookie）。
3. 一个函数检查url哈希是否存在，并且如果其唯一标识符与相关内容匹配，则它允许AJAX函数运行
4. AJAX处理程序收集相关内容并将其注入页面中，以供用户查看

我面临的问题是，用户提交表单后，它大约需要40秒钟才能真正提交表单，然后页面刷新，应用url哈希，然后注入内容。我不确定是什么原因导致了延迟，无论是函数本身还是与注入的内容有关。内容本身包括视频和直接通过CMS提供的副本或从外部来源（作为iFrame）提取的副本。

作为参考，这里是用于检查/批准哈希/触发AJAX的JavaScript函数

import axios from 'axios';

const GatedContent = () => {

  const keyValue = WP.unique_key;
  const urlhash = window.location.hash;
  const txthash = urlhash.replace("#","");

  // Set Gated Content cookie
  function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }

  // Check if url has same hash as unique key 
  // Set localStorage to remember user has access to content
  if (txthash == keyValue) {
    setCookie('gcCookie',keyValue,182);
  }

  // If cookie set to allows access to content,// remove publicContent and display gatedContent
  if (document.cookie.split(';').some(function (item) {
    return item.indexOf('gcCookie=' + keyValue) >= 0
  })) {

    const publicContent = document.querySelector('#gated-content__public');
    const gatedContent = document.querySelector('#gated-content__gated');

    // Remove public content and replace with gated content
    if (publicContent) {

      publicContent.remove();
      const formData = new FormData();
      const action = document.querySelector('.action-contact');

      formData.append('action','gatedContentActive');
      formData.append('post_id',WP.post_id);

      axios({
        method: 'POST',url: WP.ajax,data: formData
      })
        .then(function (response) {
          gatedContent.innerHTML += response.data;

          if (action) {
            action.classList.remove('public-hidden');
          } else {
            return false;
          }

          // Run EqualHieghts function for 
          window.addEventListener('load',function () {
            sameHeights('[data-key="sameHeights"]');
          });

        },(error) => {
            console.log(error);
          });

    } else {
      return false;
    }

  }

  // If url hash and unique key don't match,do nothing
  else {
    return false;
  }
}

export default GatedContent;

这是AJAX处理程序功能

<?php
function gatedContentActive_handler() {

// Grab php file output from server
$postid = $_POST['post_id'];
set_query_var('the_page_id',$postid);
partial( 'gate-content',['gc' => get_field('gated_content',$postid)] );

die();
}

add_action('wp_ajax_gatedContentActive','gatedContentActive_handler');
add_action('wp_ajax_nopriv_gatedContentActive','gatedContentActive_handler');

然后，内容通过上述功能提供的文件在屏幕上显示给用户。

我尝试通过控制台中的network选项检查加载时间，但似乎没有任何延迟或缓慢的内容加载速度。 admin-ajax的最慢时间似乎是1.31s。

任何在哪里寻找速度问题根源或如何加快速度的想法都将受到赞赏！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）