How to use Ajax to asynchronously submit AnQiCMS message form data on the front end?

As a senior website operations expert, I know the importance of user experience in the success of a website.In today's fast-paced online environment, users have increasingly high expectations for page loading speed and smooth interaction.The traditional way of submitting a message form often leads to page refresh, which not only interrupts the user's operation process, but may also cause unnecessary waiting due to network latency, thereby affecting user satisfaction.

Fortunately, with the continuous development of front-end technology, we can use Ajax (Asynchronous JavaScript and XML) to submit data asynchronously, complete form submission without refreshing the page, and significantly improve the user experience.Today, let's delve into how to elegantly implement the Ajax asynchronous submission of the comment form on the front end of AnQiCMS (AnQiCMS).

Say goodbye to waiting: Implement the Ajax asynchronous submission of the留言表单 in AnQiCMS frontend elegantly

AnQiCMS is the preferred choice for many enterprise content management systems with its high efficiency, customizability, and SEO-friendliness.Its flexible template engine and rich tag features provide great convenience for front-end developers.The comment form is an important bridge for website interaction with users. Using Ajax asynchronous submission can not only optimize the user experience but also reduce server pressure and improve data processing efficiency.

Preparation: Understand the operation mechanism of the AnQiCMS留言表单

Before implementing Ajax submission on the front end, we need to understand how the AnQiCMS message form works in the background. According to the AnQiCMS documentation, the message form data is submitted by default to/guestbook.htmlThis URL. It is noteworthy that AnQi CMS supports onereturnParameters control the data format of the server's response. For Ajax submissions, we usually want the server to return JSON-formatted data so that front-end JavaScript can easily parse and process.

AnQi CMS template tags{% guestbook fields %}Can dynamically generate the background configuration of the message form fields. These fields include but are not limited to:

• user_name: The name of the message sender
• contactContact Information
• contentMessage Content
• And various fields customized in the background.

In addition, if the background has enabled the message verification code function, the form must also includecaptcha_idandcaptchaTwo fields, as well as an image element used to refresh the captcha.

Build the HTML structure of the front-end message form

First, in your security CMS template file (for exampleguestbook/index.htmlOr you can create a custom feedback page template) and add a basic HTML form. It is recommended to add a form element for easy JavaScript access.id. It is crucial to ensure that all input fields have the correctnameproperties, thesenameproperties need to match the field names expected by the AnQiCMS backend.

This is an example of an HTML form structure that includes dynamic fields and captcha:

<form id="guestbookForm" method="post" action="/guestbook.html">
    <!-- 动态生成的留言字段 -->
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group">
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</label>
            <div>
                {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{ item.Type }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                       {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" autocomplete="off"
                       class="form-control">
                {% elif item.Type == "textarea" %}
                <textarea name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                          {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" rows="5"
                          class="form-control"></textarea>
                {% elif item.Type == "radio" %}
                    {% for val in item.Items %}
                    <input type="{{ item.Type }}" name="{{ item.FieldName }}" value="{{ val }}" id="{{ item.FieldName }}-{{ loop.index }}">
                    <label for="{{ item.FieldName }}-{{ loop.index }}">{{ val }}</label>
                    {% endfor %}
                {% elif item.Type == "checkbox" %}
                    {% for val in item.Items %}
                    <input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}" id="{{ item.FieldName }}-{{ loop.index }}">
                    <label for="{{ item.FieldName }}-{{ loop.index }}">{{ val }}</label>
                    {% endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" id="{{ item.FieldName }}" class="form-control">
                    {% for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                    {% endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}

    <!-- 验证码部分 (如果后台开启) -->
    <div class="form-group captcha-section">
        <label>验证码<span class="text-danger">*</span></label>
        <div class="input-group">
            <input type="hidden" name="captcha_id" id="captchaId">
            <input type="text" name="captcha" id="captchaInput" required placeholder="请输入验证码" class="form-control captcha-input">
            <img src="" id="captchaImage" alt="验证码" class="captcha-img">
        </div>
    </div>

    <!-- 重要的隐藏字段：告诉AnQiCMS我们想要JSON响应 -->
    <input type="hidden" name="return" value="json">

    <div class="form-group">
        <button type="submit" id="submitBtn" class="btn btn-primary">提交留言</button>
        <button type="reset" class="btn btn-secondary">重置</button>
    </div>
</form>

<div id="responseMessage" class="mt-3"></div>

<script>
    // 验证码刷新逻辑 (来自tag-/anqiapi-other/167.html文档)
    function refreshCaptcha() {
        fetch('/api/captcha')
            .then(response => response.json())
            .then(res => {
                if (res.code === 0) {
                    document.getElementById('captchaId').value = res.data.captcha_id;
                    document.getElementById('captchaImage').src = res.data.captcha;
                } else {
                    console.error('Failed to get captcha:', res.msg);
                }
            })
            .catch(err => console.error('Error fetching captcha:', err));
    }

    // 页面加载时初始化验证码
    document.addEventListener('DOMContentLoaded', refreshCaptcha);
    // 点击验证码图片时刷新
    document.getElementById('captchaImage').addEventListener('click', refreshCaptcha);
</script>

Implement JavaScript logic for Ajax asynchronous submission

Next, we will use JavaScript (here using the nativefetchFor example, it is more modern and does not require libraries) to handle form submission events. The core idea is to prevent the table