为什么找不到我的 typo3 6.2 ajax 操作？

Question

我正在尝试在我的控制器 Factoids 中执行 ajax 操作 "ajaxfactsAction()"。但是当调用 ajax 时，我收到 303 错误并重定向到另一个页面。

这是我的模板中调用 ajax:

<f:section name="main">
<h1>I am</h1>
<f:form action="">
    <f:form.select id="topics" name="topics" options="{categories}" optionValueField="uid" optionLabelField="title"  additionalAttributes="{onchange: 'getFacts()'}"/>
    <f:form.hidden id="extraids" name="extraids" value="3,4,5" />
    <f:form.hidden id="number" name="number" value="3" />
</f:form>
<div>
<div class="factoid1"><f:render partial="Category/Factoid1"   /></div>
<div class="factoid2"><f:render partial="Category/Factoid2"   /></div>
<div class="factoid3"><f:render partial="Category/Factoid3"   /></div>
</div>
<f:flashMessages renderMode="div" />

<script type="text/javascript">
    var actionsPathFromViewHelperSetInTheView = '<f:uri.action action="ajaxfacts" controller="Factoid" />';
</script>


</f:section>

这是 javascript:

function performAjaxCall(Topics, Extraids, Number) {
    alert("dddd");
    $.ajax({
        url: actionsPathFromViewHelperSetInTheView,
        data:{
            "tx_factoids_interests[uid]":Topics,
            "tx_factoids_interests[extraids]":Extraids,
            "tx_factoids_interests[number]":Number
        },
        success:function (data) {
            // do something with your json
            alert('Load was performed.');
        }
    });
}

function getFacts(){
    performAjaxCall($("#topics").val(), $("#extraids").val(), $("#number").val());   
}

这是我的动作函数：

/**
     * action ajaxfacts
     *
     * @return void
     */
    public function ajaxfactsAction() {
        echo __LINE__;
        die;
}

我的插件在 ext_localconf:

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
    'Seethroughweb.' . $_EXTKEY,
    'Interests',
    array(
        'Factoid' => 'interests, list, show, new, edit, create, update, ajaxfacts',

    ),
    // non-cacheable actions
    array(
        'Factoid' => 'interests, list, show, new, edit, create, update, ajaxfacts',

    )
);

我缺少什么才能使操作易于访问？

生成的 uri 如下所示：

xhttp://...xyz.com/index.php?id=111&tx_factoids_interests%5Baction%5D=ajaxfacts&tx_factoids_interests%5Bcontroller%5D=Factoid&cHash=0e805af8af888ebd7fec5e207f64b5f7&tx_factoids_interests%5Buid%5D=5&tx_factoids_interests%5Bextraids%5D=3%2C4%2C5&tx_factoids_interests%5Bnumber%5D=3

调用的页面可通过第一部分访问，即：

xhttp://....xyz.com/index.php?id=111

我使用的是 Typo3 6.2，谢谢。

PS：javascript 第二版 - 像 Arek 的答案一样工作。

function performAjaxCall(Topics, Extraids, Number) {
    alert("performAjaxCall");
    $.ajax({
        url: $('form').attr('action'), // now we're using the url generated by Extbase/Fluid
        data: $('form').serialize(), // serializes the form

//        data:{
//            "tx_factoids_interests[uid]":Topics,
//          "tx_factoids_interests[extraids]":Extraids,
//          "tx_factoids_interests[number]":Number
//        },
        success:function (data) {
            // do something with your json
            alert('performAjaxCall Load was performed.');
        }
    });
    return false;
}

PPS：此方法的请求 uri 现在如下所示：

http://...xyz.com/undefinedindex.php?id=111&tx_factoids_interests%5Baction%5D=ajaxfacts&tx_factoids_interests%5Bcontroller%5D=Factoid&cHash=0e805af8af888ebd7fec5e207f64b5f7

和当前 javascript:

function performAjaxCall( Topics, Extraids, Divid) {
    //alert("performAjaxCall");
    $.ajax({
        type: "POST", 
        dataType: "json",

        url: $('base').attr('href') + $('#form1').attr('action'), // now we're using the url generated by Extbase/Fluid
        data: $('#form1').serialize(),

//      url: actionsPathFromViewHelperSetInTheView,
//        data:{
//            "tx_factoids_interests[uid]":Topics,
//          "tx_factoids_interests[extraids]":Extraids           
//        },

        success:function (data) {
            // do something with your json

            $.each( data, function( key, val ) {
                var items='';
                var id = '';
                $.each( val, function( ikey, ival ) {
                    if(ikey =='category') id = Divid +" #factoid"+ival; 
                    items +=  "<span class="+ikey+">" + ival + "</span><br/>" ;
                });
                $(id).html(items);

            });

//          $(".factoid1").html();
//          $(".factoid2").html();
//          $(".factoid3").html();
            //alert('performAjaxCall Load was performed.');
        }
    });
}

function getFacts(Divid){
    performAjaxCall( $(Divid+"topics").val(), $(Divid+"extraids").val(), Divid );    
    return false;
}

和当前模板：

 <div id="interests">
    <f:form action="ajaxfacts" controller="Factoid" id="form1">
        <f:form.select id="intereststopics" name="topics" options="{categories}" optionValueField="uid" optionLabelField="content"  additionalAttributes="{onchange: 'getFacts(\'#interests\')'}"/>
        <f:form.hidden id="interestsextraids" name="extraids" value="2,4,5" />

    </f:form>
    <div>
    <div id="factoid2" class="factoid1"></div>
    <div id="factoid4" class="factoid2"></div>
    <div id="factoid5" class="factoid3"></div>
    </div>
    </div>

PPPS: 最终代码

function performAjaxCall( Topics, Extraids, Divid, Formid) {
      $.ajax({
        type: "POST", 
        dataType: "json",

        url: $(Formid).attr('action'), // now we're using the url generated by Extbase/Fluid
        data: $(Formid).serialize(),

        success:function (data) {

            $.each( data, function( key, val ) {
                var items='';
                var id = '';
                $.each( val, function( ikey, ival ) {
                    if(ikey =='category') id = Divid +" #factoid"+ival; 
                    $(id +" ."+ikey).html(ival);

                });

            });

        }
    });
}

function getFacts(Divid, Formid){
    performAjaxCall( $(Divid+"topics").val(), $(Divid+"extraids").val(), Divid, Formid );    
    return false;
}

Answer 1

您没有设置 <f:form action="">。

在您的情况下，计算的 cHash 是基于 <f:uri> 生成的 URL，其中不包含有关您在 JavaScript 中添加的其他属性的任何信息.因此，您运行进入了 cHash 错误。

您可以通过禁用 $GLOBALS['TYPO3_CONF_VARS']['FE']['pageNotFoundOnCHashError']（本地配置）来防止在出现 cHash 错误时调用 pageNotFoundHandler。

有关 cHash 的更多信息：

The mysteries of &cHash

The &cHash parameter of frontend plugins might have puzzled quite a few developers but this article will explain how it works and what to avoid in order to make great, reliable plugins with TYPO3.

解决方案

您需要使用 Extbase/Fluid 生成的表单中的 action 而不是自定义 url。

所以您的表单应该如下所示：

<f:form action="ajaxfacts" controller="Factoid">

你的 JavaScript 应该是这样的：

$(function() { 

    $('form').submit(function(e) {

        $.ajax({
            type: "POST",
            url: $('base').attr('href') + $('form').attr('action'), // now we're using the url generated by Extbase/Fluid
            data: $('form').serialize(), // serializes the form
            success:function (data) {
                // do something with your json
                alert('Load was performed.');
            }
        });

        return false;
    });

});

PPPS 最终 js 代码：

function performAjaxCall( Topics, Extraids, Divid, Formid) {

    $.ajax({
        type: "POST", 
        dataType: "json",


        url: $(Formid).attr('action'), // now we're using the url generated by Extbase/Fluid
        data: $(Formid).serialize(),

        success:function (data) {

            $.each( data, function( key, val ) {
                var items='';
                var id = '';
                $.each( val, function( ikey, ival ) {
                    if(ikey =='category') id = Divid +" #factoid"+ival; 
                    $(id +" ."+ikey).html(ival);
                    //items +=  "<span class="+ikey+">" + ival + "</span><br/>" ;
                });

            });

        }
    });
}

function getFacts(Divid, Formid){
    performAjaxCall( $(Divid+"topics").val(), $(Divid+"extraids").val(), Divid, Formid );    
    return false;
}

为什么找不到我的 typo3 6.2 ajax 操作？

why can't my typo3 6.2 ajax action be found?

ajax

typo3-6.2.x