如果用户名存在于Django和Bootstrap中，则返回错误消息

from django.contrib.auth.models import User

def check_username(username):
    if User.objects.filter(username=username).exists():
        return "用户名已存在"
    else:
        return "用户名可用"

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" name="username">
    <small id="usernameError" class="form-text text-danger"></small>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单提交

    var username = document.getElementById('username').value;

    // 使用Ajax请求后端验证用户名是否存在
    // 这里只是一个示例，具体实现需要根据后端接口进行调整
    // 假设后端返回的数据格式为：{ "exists": true } 或 { "exists": false }
    // 根据返回的结果显示错误消息
    if (usernameExists(username)) {
      document.getElementById('usernameError').textContent = '用户名已存在';
    } else {
      document.getElementById('usernameError').textContent = '';
      // 继续提交表单
      this.submit();
    }
  });

  function usernameExists(username) {
    // 使用Ajax请求后端验证用户名是否存在
    // 这里只是一个示例，具体实现需要根据后端接口进行调整
    // 假设后端返回的数据格式为：{ "exists": true } 或 { "exists": false }
    // 返回用户名是否存在的布尔值
    // 可以使用jQuery的$.ajax()方法或原生的XMLHttpRequest来发送Ajax请求
    // 这里使用了fetch()方法来发送请求
    return fetch('/check_username', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username: username })
    })
    .then(response => response.json())
    .then(data => data.exists);
  }
</script>