As an experienced website operations expert, I know that every detail can affect user experience and operational efficiency.In AnQiCMS (AnQiCMS), such an enterprise-level content management system based on Go language and known for its efficiency and customizability, the flexible control over the data return format after the submission of the message form undoubtedly brings more possibilities for content operation and user interaction.
Today, let's delve into how to configure the comment form submission in AnQiCMS to return backend data in HTML or JSON format, and how this flexibility empowers our website operations.
The AnQiCMS留言表单: a communication bridge between users and the website
It is crucial to have user feedback and communication in the operation of any website.The AnQiCMS built-in message management function 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 often, we not only need to collect data, but also need to finely control the user experience after data submission or the integration with other systems.This involves the choice of backend data return format.
The submission address of the AnQiCMS feedback form is unified/guestbook.html. The system will handle the form data by default and return the corresponding response according to the configuration. What we focus on is a hidden field namedreturn.
Fine control: Configure data return format
The AnQiCMS message form submission mechanism is very considerate, it allows us to add a hidden field in the formreturnSpecify the data format returned by the backend. This field can accept two values:htmlorjson.
1. Return HTML format data: Traditional and direct
When we willreturnThe value of the field is set tohtmlAt, or simply omit this field (becausehtmlIt is the default behavior), after the backend has processed the message, it will return a complete HTML page.
When to choose HTML return?
- Simple scenario and traditional interaction:If your website design leans towards traditional, and you want users to be redirected to a 'Thank You for Your Message' page after submitting a comment, or to render a success/failure information area directly 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 functions, 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, such as displaying a friendly prompt, guiding the user to browse other content, or showing the specific reason for form validation failure.
2. Return JSON format data: The foundation of modernization and flexibility
When we takereturnThe value of the field is set tojsonAfter processing the message, the backend will not return a complete HTML page, but a structured JSON data packet instead.
When should JSON be returned?
- Submit without refreshing (AJAX):Modern websites are increasingly focusing on user experience and tend to complete form submissions without refreshing the page.By returning JSON, we can use JavaScript (such as Fetch API or jQuery AJAX) to submit forms asynchronously in the background, receive JSON responses, and then dynamically update page elements through 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 with API integration:If your website adopts 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 return is a standard interaction method.It only transmits data, does not contain any UI rendering logic, convenient for the backend to connect with other systems.
- finer granularity control:The JSON response typically includes status codes, message text, and other fields that the front-end can use to make more intelligent judgments and feedback, such as displaying different user prompts based on different error codes.
Actual effect:The user submits a form (usually by intercepting the default submit behavior), the backend returns a JSON object. The frontend JS parses this JSON object, based on the information in it.code(Status code),msg(Message) fields determine how feedback is displayed to the user without refreshing the page.
Practical exercise: Applying data return format in templates.
Understood the use 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 usedguestbookThe label is used to automatically generate 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 on this basis.returnHide the field.
Return the HTML format example.
If you want the page to jump to the backend rendering success/failure page 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 function management of AnQiCMS).
Return JSON format example
If you want to submit without refreshing the page using AJAX and get a JSON response:
`twig