As an experienced website operations expert, I know that every detail can affect user experience and operational efficiency.In AnQiCMS such an enterprise-level content management system based on Go language, known for its efficiency and customizability, flexible control over the data return format after the message form is submitted undoubtedly brings more possibilities for content operation and user interaction.
Today, let's delve into how to configure the comment form submission in AnQiCMS, and how the backend data can be returned in HTML or JSON format, as well as how this flexibility empowers our website operations.
AutoQiCMS Message Form: The Communication Bridge Between Users and Websites
In any website operation, user feedback and communication are crucial.The AnQiCMS built-in message management feature not only supports custom message fields, allowing us to flexibly collect information according to business needs, but also provides practical features such as email reminders.But many times, we not only need to collect data, but also need to finely control the user experience after data submission or the integration method with other systems.This involves the selection of backend data return format.
The submission address of the AutoQiCMS message form is unified/guestbook.html. The system will handle the form data by default and return the corresponding response according to the configuration. And our focus is on a hidden field namedreturn.
精细化掌控：配置数据返回格式
AnQiCMS的留言表单提交机制非常贴心，它允许我们通过在表单中添加一个隐藏字段returnSpecify the data format returned by the backend. This field can accept two values:htmlorjson.
1. Return HTML format data: Traditional and direct
When we set the value of thereturnfield tohtmlauto, or simply omit this field (becausehtmlis the default behavior), the backend will return a complete HTML page after processing the message.
When should HTML be returned?
- Simple scenario and traditional interaction:If your website design is traditional and you want users to be redirected to a "Thank you for your message" page directly after submitting comments, or to have a section displaying success/failure information rendered on the current page, then HTML return is the most direct choice.
- SEO-friendly:For some scenarios that require an independent thank-you page and also want the page to be indexed by search engines, the HTML returned page structure has more advantages.
- Low development cost:If you are not familiar with front-end JavaScript interaction or the project is time-sensitive, HTML returns can quickly implement features, reducing the complexity of front-end logic.
Actual effect:After the user submits the form, the browser will initiate a page jump or refresh and load the HTML content returned by the backend.You can design this HTML response page by customizing the template, for example, displaying a friendly prompt message, guiding users to browse other content, or showing the specific reasons for form validation failure.
2. Return JSON format data: The Foundation of Modernity and Flexibility
When we putreturnfield tojsonWhen, after the backend has processed the message, it will not return a complete HTML page, but a structured JSON data packet.
When should JSON be returned?
- No refresh submission (AJAX):Modern websites are increasingly focusing on user experience, tending to complete form submissions without refreshing the page.Through JSON, we can use JavaScript (such as Fetch API or jQuery AJAX) to asynchronously submit forms in the background, receive JSON responses, and then dynamically update page elements with JS, such as displaying a pop-up box prompt, showing success messages below the form, or partially updating the message list.
- Front-end and back-end separation and API integration:If your website uses a front-end and back-end separation architecture, or needs to submit comment data to third-party CRM, customer service system, and other API interfaces, JSON is the standard interaction method.It only transmits data, does not contain any UI rendering logic, convenient for the backend to interface with other systems.
- More granular control:JSON responses typically contain status codes, message text, and other fields. Front-end can make more intelligent judgments and feedback based on this information, for example, displaying different user prompts based on different error codes.
Actual effect:User submits a form (usually intercepted by JavaScript to prevent default submission behavior), and the backend returns a JSON object. The front-end JavaScript parses this JSON object, based on whichcode（状态码）、msg（消息）等字段，决定如何在不刷新页面的前提下向用户展示反馈。
实战演练：在模板中应用数据返回格式
Understood the uses of two return formats, let's see how to implement them in the AnQiCMS template. Suppose we are editingguestbook/index.htmlthe comment page template and usedguestbookTags are automatically generated for form fields.
{# 假设这是你的留言页模板：template/default/guestbook/index.html #}
<form method="post" action="/guestbook.html" id="guestbook-form">
{# 安QiCMS留言表单标签，自动生成自定义字段 #}
{% guestbook fields %}
{% for item in fields %}
<div>
<label>{{item.Name}}</label>
<div>
{% if item.Type == "text" || item.Type == "number" %}
<input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" autocomplete="off">
{% elif item.Type == "textarea" %}
<textarea name="{{item.FieldName}}" {% if item.Required %}required lay-verify="required"{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
{# 更多字段类型（radio, checkbox, select）的渲染略... #}
{% endif %}
</div>
</div>
{% endfor %}
{% endguestbook %}
{# 留言验证码，如果后台开启，这是必须的 #}
<div style="display: flex; clear: both">
<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
<img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
<script>
// 获取验证码的JavaScript，这部分通常放在页面的某个JS文件中或head/body底部
document.getElementById('get-captcha').addEventListener("click", function (e) {
fetch('/api/captcha')
.then(response => response.json())
.then(res => {
document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
}).catch(err => console.error('Failed to load captcha:', err));
});
document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
</script>
</div>
<div>
<button type="submit">提交留言</button>
<button type="reset">重置</button>
</div>
</form>
Now, we add to this basis.returnHide fields.
Return an HTML format example.
If you want the page to jump to the success/failure page on the backend after submission:
<form method="post" action="/guestbook.html" id="guestbook-form">
{# ... 表单的其他字段和验证码部分不变 ... #}
{# **这里是关键：设置返回HTML格式** #}
<input type="hidden" name="return" value="html">
<div>
<button type="submit">提交留言</button>
<button type="reset">重置</button>
</div>
</form>
When the user submits this form, the server will process the data and return a complete HTML page as the response.If you need to customize this response page, you may need to pay attention to the backend configuration for which template to jump to after form submission is successful or failed (usually there is corresponding configuration in the template design or feature management of AnQiCMS).
Return a JSON format example
If you want to submit without refreshing the page using AJAX and get a JSON response:
`twig