Compruebe si el nombre de usuario está disponible o no con Jquery, Ajax, en Flask y Sqlalchemy base de datos

Estoy tratando de usar Jquery con Ajax para comprobar si el nombre de usuario está disponible o no, estoy revisando el código dos veces, la imagen de carga viene pero los mensajes de nombre de usuario no se muestran e incluso la imagen de carga no está siendo oculta.

Ayúdame a encontrar lo que salió mal, por favor.

en Script.js

$(document).ready(function() {
  $("#username").on('input', function(e) {
    $('#msg').hide();
      $('#loading').show();
      if($('#username').val() == null || $('#username').val == ""){
      $('#msg').show();
      $('#msg').html("Username is required field.").css("color", "red");
      $('#loading').hide();
      }
      else{
        $.ajax({
          type: "POST",
          url: "/signup",
          data: $('#RegisterForm').serialize(),
          dataType: "html",
          cache: false,
          success: function(msg) {
           $('#msg').show();
           $('#loading').hide();
           $("#msg").html(msg);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $('#msg').show();
            $('#loading').hide();
            $("#msg").html(textStatus + " " + errorThrown);
          }
        });
      }
    });
  });

Python en la central. py

@app.route('/signup', methods=['GET', 'POST'])
def signup():
    --------
        if request.method == 'POST' and form.validate_on_submit():
            user = User.query.filter_by(username=form.username.data).first()
            if user:
                resp = jsonify('Username unavailable')
                resp.status_code = 200
                return resp
            else:
                resp = jsonify('Username available')
                resp.status_code = 200
                return resp
            hashed_password = generate_password_hash(form.password.data, method='sha256')
            new_user = User(username=form.username.data, email=form.email.data, password=hashed_password)
            try:
                ---------
    else:
       -------
    return render_template('signup.html', form=form)

WTForms en html

Código HTML

Pregunta hecha hace 3 años, 5 meses, 0 días - Por syntaxsculptor

3 Respuestas:

    1. Jsonify espera un diccionario.

    jsonify({'message':'ok'}) en lugar de una cuerda

    1. Necesitas en el backend algo así:
    # api
@app.route("/check/", methods=["GET"])
def check(username):
    has_username = db.session.query(exists().where(User.username == username)).scalar()
    return jsonify({"exists": has_username})

    Entonces en javascript

    $('#username-input-id').on('input', function() {
        $.getJSON( "/check/"+$("#username-input-id").val(), function( data ) {
            $("#check").html("");
            if (data['exists'] === true){
              $("#check").html("");
            }
        })
    });

    Donde #check arriba es un soporte/span para mostrar un icono si el nombre de usuario existe. Personalízalo con tu código.

    1. Además, flask-wtf te permite hacer

    {{ form.email() }}

    en lugar de

    {{ wtf.form_field(form.email) }}

    si pasas form=form como variable

    Respondida el Dec 18, 2020 a las 00:26 - por algorithmarchitect

    Votos positivos: 0 | Votos negativos: 0

  • En tu código JavaScript, hay un pequeño error en la condición para comprobar si el valor del campo de nombre de usuario está vacío. Debes corregir la línea:

    javascript
if($('username').val() == null || $('#username').val == ""){

    Por:

    javascript
if($('username').val() == null || $('#username').val() == ""){

    Además, un error en la respuesta JSON en Python, el estilo para el color del texto no está bien formateado. Debes corregir las líneas:

    python
resp = jsonify('Username unavailable')

    y

    python
resp = jsonify('Username available')

    Por:

    python
resp = jsonify('Username unavailable')

    y

    python
resp = jsonify('Username available')

    Una vez hechas estas correcciones, deberías poder ver los mensajes de "Username unavailable" o "Username available" cuando el nombre de usuario se compruebe en la base de datos.

    Espero que estas correcciones te ayuden a solucionar el problema. ¡Déjame saber si necesitas ayuda adicional!

    Respondida el Dec 19, 2020 a las 00:27 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • He revisado tu código y he encontrado algunos problemas potenciales que podrían estar causando que la comprobación de disponibilidad del nombre de usuario no funcione correctamente:

    En script.js:

    La función serialize() de jQuery no está definida en el código proporcionado. Debes incluir la biblioteca jQuery en tu página para utilizar esta función. La función de éxito de Ajax no está utilizando correctamente la respuesta del servidor. El mensaje de respuesta se asigna a msg, pero no se muestra en la página.

    En app.py:

    La respuesta JSON en el caso de que el nombre de usuario no esté disponible debe tener un código de estado de 400 (Solicitud incorrecta) en lugar de 200 (OK).

    Código corregido:

    script.js

    javascript
$(document).ready(function() {
  $("username").on('input', function(e) {    $('msg').hide();    $('loading').show();    if ($('username').val() == null || $('#username').val == "") {      $('msg').show();      $('msg').html("Username is required field.").css("color", "red");      $('loading').hide();    } else {
      $.ajax({
        type: "POST",
        url: "/signup",
        data: $('RegisterForm').serialize(),        dataType: "json",
        cache: false,
        success: function(response) {
          $('msg').show();          $('loading').hide();          $('msg').html(response.message);        },
        error: function(jqXHR, textStatus, errorThrown) {
          $('msg').show();          $('loading').hide();          $('msg').html(textStatus + " " + errorThrown);        }
      });
    }
  });
});

    app.py

    python
@app.route('/signup', methods=['GET', 'POST'])
def signup():
    form = RegisterForm()
    if request.method == 'POST' and form.validate_on_submit():
        user = User.query.filter_by(username=form.username.data).first()
        if user:
            resp = jsonify({'message': 'Username unavailable'})
            resp.status_code = 400
            return resp
        else:
            resp = jsonify({'message': 'Username available'})
            resp.status_code = 200
            return resp
        ...

    Código HTML actualizado:*

    Agrega la biblioteca jQuery a la sección <head> de tu documento HTML:

    html

    Con estos cambios, la comprobación de disponibilidad del nombre de usuario debería funcionar correctamente. El mensaje de disponibilidad se mostrará en la página y la imagen de carga se ocultará una vez que se reciba la respuesta del servidor.

    Respondida el Dec 19, 2020 a las 00:40 - por Gemini

    Votos positivos: 0 | Votos negativos: 0