类属性内的Ajax调用

时间:2018-07-05 03:29:18

标签: javascript php ajax wordpress

我正在移动一个php / js / ajax脚本

我遇到了以前从未见过的东西,我理解它的作用,但是我试图弄清楚如何使此功能适用于wordpress。

代码:

<a id="a" class="tab block sel {content:'cont_1', ajaxContent:'php/templates.php',ajaxData:'type=pistols'}">Pistols</a>
<a id="b" class="tab block {content:'cont_2', ajaxContent:'php/templates.php',ajaxData:'type=rifles'}">Rifles</a>
<a id="c" class="tab block {content:'cont_3', ajaxContent:'php/templates.php',ajaxData:'type=shotguns'}">Shotguns</a>
<a id="d" class="tab block {content:'cont_4', ajaxContent:'php/templates.php',ajaxData:'type=cameras'}" >Cameras</a>
<a id="e" class="tab block {content:'cont_4', ajaxContent:'php/templates.php',ajaxData:'type=audios'}" >Audio</a>

模板PHP:

if(isset($_POST['type'])) {
    //The div for the manufacturer tabs, uniquely identified by the $_POST['type']
    echo "<ul id=\"".$_POST['type']."\" class=\"shadetabs\" style=\"position:relative; top:-12px; width:905px;\">";
    if ($_POST['type'] === 'pistols') {
        $manufacturers = .. and so on

据我了解,我们正在调用Templates.php并传递$ _POST ['type']。编写完成后,脚本将替换<div id="cont_1"

的内容

在wordpress中,我无法调用随机的php文件,因为ajax无法正常工作。我需要将其转换为函数并将其挂接到wordpress。

有人知道这种代码如何工作吗?

作为替代方案,我计划执行以下操作,但我希望使其与原始代码相似,这将需要很多额外的代码行。

var tab = jQuery("#a").type;
jQuery.ajax({
        url: custom_designer.ajax_url,
        type: 'post',
        data: {
        action: 'php_template_function'
            type: tab
        },
        success: function (response) {
            document.getElementById('caseclub_response').innerHTML = response;
            document.getElementById("buy_case_foam_added").submit();
        }
    });

1 个答案:

答案 0 :(得分:0)

  

有人知道这种代码如何工作吗?

好像有一些JavaScript从class属性中提取对象字符串,然后从template.php获取HTML并将其写入某处。

例如:

function fetchList(element) {
  var settings = element.className.match(/\{.+\}/);
  settings = eval('(' + settings[0] + ')') // eww

  fetch(settings.ajaxContent, {
    method: 'post',
    body: settings.ajaxData
  }).then((response) => {
    // Error handling...
    response.text().then(() => {
      // Now writes the HTML somewhere...
    });
  });
}

如果要复制他们所做的工作,请查看是否可以使用检查器找到原始代码。