AJAX 在静态页面中使用插件时找不到处理程序

Question

这是我的插件文件系统。我通过创建插件的片段来添加插件，然后将其添加到静态页面中。它添加成功但是当我使用 data-request 提交 for 时它给出了 AJAX 未找到处理程序。我在脚本和用户中添加 jquery {% 框架额外 %}

{%框架%} 但它给出了错误。

default.htm文件中的代码是

*<form name="plan-form" data-request="onSendEmail" data-request-validate
    data-request-flash class="row ttm-quote-form clearfix">
        <div class="alert alert-danger" data-validate-error>
            <p data-message></p>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="name" placeholder="Name">
            <span data-validate-for="name"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="phone" placeholder="Phone">
            <span data-validate-for="phone"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="email" placeholder="Email">
            <span data-validate-for="email"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="subject" placeholder="Subject">
            <span data-validate-for="subject"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <textarea class="form-control bg-white" name="message" required placeholder="Message"></textarea>
            <span data-validate-for="message"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <select name="plan" id="" class="form-control bg-white" required>
                <option value="Free">Free</option>
                <option value="Standard">Standard</option>
                <option value="Premium">Premium</option>
            </select>
            <span data-validate-for="plan"></span>
        </div>
        <div class="col-md-12 text-left">
            <button type="submit" data-attach-loading class="oc-loader ttm-btn ttm-btn-size-md ttm-btn-bgcolor-skincolor">Send</button>
        </div>

    </form>*

And the code of **PlanForm.php** file is

*<?php
    namespace Virtuenetz\Plan\Components;
    // use Virtuenetz\Plan\Models\Plan;
    use Cms\Classes\ComponentBase;
    use Input;
    use Mail;
    use Validator;
    use ValidationException;
    use Flash;
    class PlanForm extends ComponentBase{
        public function componentDetails()
        {
            return [
                'name' => 'Plan Form',
                'description' => 'Simple Plan Form'
            ];

        }

        public function onSendEmail(){

            $data = post();

            $name = post('name');
            $phone = post('phone');
            $email = post('email');
            $subject = post('subject');
            $msg = post('message');

            $rules = [
                'name' => 'required',
                'email' => 'required|email',
                'subject' => 'required',
                'message' => 'required',
                'plan' => 'required',
            ];

            $validation = Validator::make($data, $rules);

            if ($validation->fails()) {
                throw new ValidationException($validation);
            }

            print_r($data);die;
            $var  = ['name' => Input::get('name'), 'email' => Input::get('email'),
            'phone' => Input::get('phone'), 'subject' => Input::get('subject'),
            'message' => Input::get('message'), 'plan' => Input::get('plan')];

            Mail::send('virtuenetz.plan::mail.message', $var,function($message){
                $message->to(Input::get('email'),'Admin Person');
                $message->subject(Input::get('subject'));
            });

            Flash::success('Jobs done!');
        }
    }
?>`enter code here`
*

Answer 1

您的代码片段是什么样的？

所以我只是在我自己的静态页面上测试了这个。我已经成功地通过使用代码片段和静态页面的插件发出 Ajax 请求。我在布局中没有组件字段。为了清楚起见，我还使用 OctoberCMS 的 V2 和 V1 对此进行了测试。 Here is a test page to see it in action.

我认为最重要的是确保您使用的是正确的名称参考。所以在我看来，如果您注册的组件是 chatBoi，那么您应该使代码段相同 chatBoi。但是，使用 {{ __SELF__ }} 应该不会成为一个因素。我的所有 javascript 请求 $.request() 都工作正常。

插件PHP:

<?php namespace Branmuffin\Chatboi;

use System\Classes\PluginBase;

class Plugin extends PluginBase
{
    public function registerComponents()
    {
        return [
            'BranMuffin\Chatboi\Components\ChatBoi' => 'chatBoi'
        ];
    }

    public function registerPageSnippets()
    {
        return [
           'BranMuffin\Chatboi\Components\ChatBoi' => 'chatboi',
           'BranMuffin\Chatboi\Components\TestRequest' => 'testRequest'
        ];
    }

    public function registerSettings()
    {
    }
}

组件PHP:

<? namespace Branmuffin\Chatboi\Components;

use October\Rain\Support\Collection;
use CMS\Classes\ComponentBase;
use Input as Inputs;
use Mail;
use Validator;
use Illuminate\Http\RedirectResponse;
use Flash;
use Session;
use Crypt;
use str;
use Redirect;
use Carbon\Carbon;

class TestRequest extends ComponentBase
{

    public function componentDetails() {
        return [
            'name' => 'TestRequest',
            'description' => "Test Request"
        ];
    }

    public function onTestRequest() {
        $count = 1;    
        if (Session::has('count')) {
            $count = 1 + Session::get('count');
            Session::put('count', $count);
        } else {
            Session::put('count', $count);
        }
        $this->page['count'] = 'success '. $count;
        return 'success '. $count;
    }

//END COMPONENT }

Twig 标记：

<h2>Test Request</h2>

<form name="plan-form" data-request="onTestRequest" data-request-validate
    data-request-flash data-request-update="'@count': '#result'">
    <p>
        <code style="word-break: break-all;">
            &lt;form name="plan-form" data-request="onTestRequest" data-request-validate
        data-request-flash class="row ttm-quote-form clearfix"&gt;
                &lt;button type="submit"&gt;Test Request&lt;/button&gt;
            &lt;/form&gt;
        </code>
    </p>
    <button type="submit">Test Request</button>
    <p id="result">
        {% partial '@count' %}
    </p>
</form>

静态页面OctoberCMS V2:

网络请求证明：

布局字段图像：

此行下方的信息仍然适用于创建成功的组件。

添加{{ __SELF__ }}::onSendEmail

Here are the docs.

如果两个组件注册了相同的处理程序名称，建议在处理程序前加上组件的简称或别名。如果组件使用 mycomponent 的别名，则可以使用 mycomponent::onName.

来定位处理程序

<button data-request="mycomponent::onSubmitContactForm">Go</button>

您可能希望使用 SELF 引用变量而不是硬编码别名，以防用户更改页面上使用的组件别名。

<form data-request="{{ __SELF__ }}::onCalculate" data-request-update="'{{ __SELF__ }}::calcresult': '#result'">

Answer 2

遗憾的是，这是静态页面的实际限制，您不能对它们使用 AJAX 处理程序。

因此，要么尝试使用普通页面，要么使用 JQUERY 向组件的处理程序发出 custom/manual ajax 请求。

OR better add that component to Layout page

Ref => https://octobercms.com/blog/post/introducing-snippets

如有疑问请评论。

AJAX 在静态页面中使用插件时找不到处理程序

AJAX handler not found in found when use plugin in static pages

octobercms