As an experienced website operations expert, I fully understand your dual concerns about user experience and website security.The captcha is an important part of the website's defense line, and its convenience and effectiveness directly affect the user conversion rate and operational efficiency.Can the AnQiCMS captcha image implement the interactive effect of refreshing the image area by clicking?This question, I am happy to tell you, the answer is affirmative, and AnQiCMS has provided a clear and easy-to-implement solution for this.

AnQiCMS is a content management system known for its efficiency and customizability, taking into account various user experience details from the beginning of its design.The click-to-refresh function of the captcha is a manifestation of its concept.It cleverly combines the backend API interface with the frontend JavaScript logic, allowing users to easily obtain new captcha, avoiding the trouble of repeated input due to blurred or indistinguishable images, greatly improving the smoothness of user operations in scenarios such as registration,留言 or comment.

Function analysis: The secret of AnQiCMS captcha refresh

To implement captcha click refresh, AnQiCMS adopts a standard and efficient technology stack:

Firstly, at the backend level, AnQiCMS has built-in an API interface specifically for generating and managing captcha. When a user needs a captcha, the frontend sends a request to this interface, and the backend immediately generates a new captcha image and a corresponding unique identifier (captcha_idThis information will be returned to the frontend. This process is quick and secure, ensuring that a new captcha is provided every time the page is refreshed, effectively resisting automated attacks.

Secondly, in terms of integration with front-end templates, the strength of AnQiCMS lies in its flexibility.You only need to embed a concise HTML structure and a few lines of JavaScript code in the form area where you need the captcha.<img>Label, a hidden input box used to store the unique identifier of the captchainput type="hidden"), as well as a text box for the user to enter the captcha.

The core interaction logic is handled by JavaScript.When the user clicks on the captcha image, the predefined JavaScript event listener is triggered./api/captcha) Send asynchronous request. After the request is successful, JavaScript will get the new captcha image URL returned by the API andcaptcha_id. Then, it will update dynamically<img>label'ssrcProperties to display a new image and update the hidden input box'svalueValue to save the new onecaptcha_idThus, the user can obtain a new captcha without refreshing the entire page, greatly optimizing the operation experience.

Operation steps: turn theory into reality.

Integrate this feature into your AnQiCMS site, the process is clear and easy to follow. Usually, you will make modifications in template files that require captcha in comment sections, comment areas, or user registration:

  1. Enable background captcha featureFirst, log in to your AnQiCMS backend management system, go to the "Function Management" or "Global Settings" under the "Content Settings" option.Here, you can find the related settings to enable captcha.Ensure that this feature is checked and enabled, as this is the foundation for front-end implementation.
  2. Locate the target template file: Find the corresponding front-end template file for the page where you want to add the captcha. For example, if it is a message board, it would typically be something likeguestbook/index.htmlThe file; if it is in the comment section, it may bearchive/detail.html(Document detail page) orproduct/detail.html(Product detail page) and other places contain the code for the comment form.
  3. Insert HTML structureIn the template file you find, locate the position where the captcha should be displayed, which is usually near the user's captcha input text box. Here, you need to add the following basic HTML structure:
    
<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;" />
</div>
    This code creates a hiddencaptcha_idfield, a captcha input box, and the most critical captcha image placeholder.
  4. integrated JavaScript refresh logic: Following the HTML structure, you need to add JavaScript code to implement the click refresh function.The AnQiCMS document provides two implementation methods, one is native JavaScript, and the other is a simplified version based on jQuery.
    • Native JavaScript version: 
      
<script>
  document.getElementById('get-captcha').addEventListener("click", function (e) {
    fetch('/api/captcha') // 向AnQiCMS验证码API发送请求
      .then(response => response.json()) // 解析JSON响应
      .then(res => {
        document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id); // 更新隐藏字段
        document.getElementById('get-captcha').setAttribute("src", res.data.captcha); // 更新图片src
      }).catch(err => { console.error('验证码刷新失败:', err); });
  });
  document.getElementById('get-captcha').click(); // 页面加载后自动请求并显示初始验证码
</script>
    • jQuery version (if your template has included jQuery): 
      
<script>
  $('#get-captcha').on("click", function (e) {
    $.get('/api/captcha', function(res) {
      $('#captcha_id').attr("value", res.data.captcha_id);
      $('#get-captcha').attr("src", res.data.captcha);
    }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
        console.error('验证码刷新失败:', textStatus, errorThrown);
    });
  });
  $('#get-captcha').click(); // 页面加载后自动请求并显示初始验证码
</script>
      This code will automatically retrieve a captcha once the page is loaded and bind a click event to the captcha image. Each time the image is clicked, a new captcha will be requested from the backend and updated to display.

By following these steps, you can easily achieve the convenient interactive effect of captcha click refresh on the website driven by AnQiCMS.

Core advantages and user experience

This implementation not only enhances the convenience of users when filling out forms, reduces the trouble of repeatedly entering due to unclear captcha, but also reflects the consideration of AnQiCMS in details. For website operators, this means:

  • A more fluid user experienceUsers no longer need to go through the cumbersome process of manually refreshing the page to obtain a new captcha.
  • Higher form completion rate: Reduced user loss due to captcha difficulties.
  • Flexible customization.: You can customize the captcha area style according to your brand style using CSS, and even adjust JavaScript as needed to achieve more complex interactions.
  • Security assuranceEach refresh provides a new verification code from the backend API, ensuring system security and effectively preventing robots and malicious submissions.

AnQiCMS provides a mature and easy-to-integrate captcha solution, ensuring that the website meets high efficiency and excellent user experience while also considering content security and system stability.

Frequently Asked Questions (FAQ)

Why does the captcha image not refresh after clicking? How should I investigate?First, please check if the captcha function is enabled under the "Global Settings" of your AnQiCMS backend "Content Settings".If the background is not enabled, the front-end naturally cannot obtain the captcha.Next, check the browser console (F12) for network requests and JavaScript error messages./api/captchaWhether the request was successful (status code 200), and whether there were JavaScript errors that caused the image to be updatedsrcFailure. Common errors may include the ID selector in the JS code not matching the ID in the HTML, or network issues causing API request failures.

2. Do I need to manually enter the captcha after clicking the refresh button on the captcha image?Yes, clicking the image to refresh simply replaces the captcha image to provide a new, possibly clearer captcha for the user to identify.Users still need to manually input the corresponding characters in the text input box next to the new displayed captcha image.This conforms to the original intention of the captcha, that is, to verify the identity of the operator through human-machine recognition.

3. Can I customize the style or refresh animation effect of the captcha?Of course. AnQi