使用AJAX提交表单时Statamic Antlers模板中success变量失效

问题原因 #

你用AJAX提交表单时，Antlers模板的{{ if success }}是服务器端渲染逻辑——只有页面刷新、重新渲染模板时才会读取服务器返回的success状态。而AJAX是异步提交，页面不会刷新，原有的服务器端条件判断根本不会触发，自然没法显示成功提示。

解决思路 #

放弃依赖服务器端的success变量，改用前端状态（Alpine.js的响应式变量）控制成功/错误提示的显示，直接解析AJAX请求返回的JSON结果更新状态。

修改后的完整代码 #

模板部分（Antlers） #

{{ form:property_valuation id="propertyValuationForm" handle="property_valuation" x-data="formSetup()" x-on:submit.prevent="getResults($el)" }}
  <!-- 用Alpine的x-show控制成功提示显示 -->
  <div x-show="formResult.success" class="mt-4">
      <p class="fw-bold text-white">
        Thanks! We have received your request. We will reach out to you soon.
      </p>
  </div>

  <!-- 用Alpine的x-show控制表单和错误提示显示 -->
  <div x-show="!formResult.success">
    <!-- 错误提示：用Alpine遍历返回的errors -->
    <div x-show="formResult.errors.length" class="bg-danger text-white p-2 mb-3">
      <template x-for="error in formResult.errors" :key="error">
        <span x-text="error"></span><br>
      </template>
    </div>

    <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>
  </div>
{{ /form:property_valuation }}

JS部分（Alpine.js） #

function formSetup() {
  return {
    // 初始化状态：默认未提交，无错误
    formResult: {
      success: false,
      errors: []
    },
    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.onload = function() {
        if (xhr.readyState === xhr.DONE) {
          // 解析Statamic返回的JSON响应
          const response = JSON.parse(xhr.response);
          // 更新前端状态
          context.formResult = response;
          
          // 可选：提交成功后清空表单
          if (response.success) {
            formElement.reset();
          }
        }
      };
      
      xhr.send(data);
    }
  };
}

关键说明 #

• Statamic的AJAX表单提交后，服务器会自动返回JSON格式响应，包含success（布尔值）和errors（错误数组）字段，直接用JS解析即可。
• 用Alpine的x-show替代Antlers的{{ if }}，实现前端动态切换内容显示，无需刷新页面。
• 错误提示改用前端遍历返回的errors数组，不再依赖服务器端渲染的{{ errors }}。

内容的提问来源于stack exchange，提问作者Nicholas Norton