使用 AJAX 提交表单时，成功变量在 Statamic Antlers 模板中不起作用

Question

我正在使用静态表单和鹿角模板与 AJAX 来提交表单。但是，提交表单时，成功变量不再起作用，因此我无法更新文本以显示表单已提交。

{{ form:property_valuation id="propertyValuationForm" handle="property_valuation" x-data="formSetup()" x-on:submit.prevent="getResults($el)" }}
            {{ if success }}
              <div>
                  <p class="fw-bold text-white">
                    Thanks! We have received your request. We will reach out to you soon.
                  </p>
              </div>
            {{ else }}
              {{ if errors }}
                <div class="bg-danger text-white p-2">
                  {{ errors }}
                    {{ value }}<br>
                  {{ /errors }}
                </div>
              {{ /if }}

              <div class="row row-cols-md-1 row-cols-lg-2 align-items-center gy-2">
                <div>
                  <label for="field-email" class="visually-hidden">Email Address</label>
                  <input 
                    type="email"
                    id="field-email"
                    name="email"
                    class="form-control text-black-50-placeholder py-2"
                    placeholder="Your email address"
                  >
                </div>
    
                <div>
                  {{ partial:components/btn type="submit" isButton="true" isFullwidth="true" wrapperClass="has-light-line" }}
                    {{ form_valuation:button_text }}
                  {{ /partial:components/btn }}
                </div>
              </div>
            {{ /if }}
          {{ /form:property_valuation }}
          <script>
            function formSetup() {
              return {
                formResult: false,
                getResults(formElement) {
                  let context = this;
                  let data = new FormData(formElement);
                  let xhr = new XMLHttpRequest();
                  xhr.open(formElement.method, formElement.action);
                  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                  xhr.send(data);
                  xhr.onload = function() {
                    if (xhr.readyState === xhr.DONE) {
                      context.formResult = JSON.parse(xhr.response);
                      }
                    }
                  };
                }
              };
            }
          </script>

这个 {{ if success }} 在这里不起作用，有没有办法访问它，就像我没有使用 AJAX 一样？或者是否有其他方法来更新 for 的内容以仅显示成功文本？

Answer 1

您使用哪种缓存？