Failure jquery in function associated with submit button

Question

Failure jquery in function associated with submit button

Navigation

#1 by (1 votes)

1

Hi, I'm following an ajax tutorial that I can not get it to work. Apparently he can not even do the function funcPrincipal () {$ ('# miFormu'). on ('submit', executeAjax);} in main.js Could someone tell me what's wrong?

Here I put the files: index.html

<!DOCTYPE html >
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Registro de usuario con AJAX</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <div class="col-md-6 offset-md-3">
    <form id="miFormu" role="form">
       <div class="form-group">
         <label for="txtUsuario">Nombre Usuarios</label>
         <input type="text" class="form-control" id="txtUsuario" placeholder="Introducir nombre de usuario">
       </div>
       <div class="form-group">
         <label for="txtPassword">Contraseña:</label>
         <input type="password" class="form-control" id="txtPassword" placeholder="Introducir contraseña">
       </div>

       <button type="submit" class="btn btn-default">Registrar</button>
    </form>
  </div>

  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

register_user.php

<?php
//Arreglos a usar:
$errores = array();
$datos = array();
 //Validamos los parámetros:
if (empty($_POST['usuario']))
$errores['usuario']= 'Se requiere especificar un nombre de usuario';
else $usuario = $_POST['usuario'];

if(empty($_POST['contra']))
$errores['contra'] = 'Se requiere especificar una contraseña';
else $contra = $_POST['contra'];

//Generando nuestra respuesta
if(empty($errores))
{
  $con = mysqli_connect("localhost", "root", "", "bdusuarios_ajaxxx");
  mysqli_query($con, "INSERT usuarios VALUES('".$usuario."', '".$contra."')");

  $datos['exito'] = true;
  $datos['mensaje'] = 'El registro se ha realizado correctamente';
} else {
  $datos['exito'] = false;
  $datos['errores'] = $errores;
}

//Dar respuesta
echo json_encode($datos);

main.js

$(document).on('ready', funcPrincipal);

function funcPrincipal()
{
  $('#miFormu').on('submit', ejecutarAjax);
}

function ejecutarAjax(event) {
    alert("hola");
  var datosEnviados =
  {
    'usuario' : $('#txtUsuario').val(),
    'contra'  : $('#txtPassword').val()
  };
  $.ajax({
    type      : 'POST',
    url       : 'registrar_usuario.php',
    data      : datosEnviados,
    dataType  : 'json',
    encode    : true
  })
  .done(function(datos){
    //Especificar como actuar con los datos recibidos
    if( datos.exito )
      alert(datos.mensaje);
    else
    {
      if(datos.errores.usuario)
      alert(datos.errores.usuario);
      if(datos.errores.contra)
      alert(datos.errores.contra);
    }
  });
  event.preventDefault();
}

jquery json ajax

asked by RicardoKra 29.08.2018 в 17:58

source

1 answer

Regular expression coma search How to split a .csv file by a field

score 1 · Accepted Answer

You must make the direct call to the event ready like this:

$(document).ready(funcPrincipal);

function funcPrincipal()
{
  $('#miFormu').on('submit', ejecutarAjax);
}

function ejecutarAjax(event) {
    alert("hola");
  var datosEnviados =
  {
    'usuario' : $('#txtUsuario').val(),
    'contra'  : $('#txtPassword').val()
  };
  $.ajax({
    type      : 'POST',
    url       : 'registrar_usuario.php',
    data      : datosEnviados,
    dataType  : 'json',
    encode    : true
  })
  .done(function(datos){
    //Especificar como actuar con los datos recibidos
    if( datos.exito )
      alert(datos.mensaje);
    else
    {
      if(datos.errores.usuario)
      alert(datos.errores.usuario);
      if(datos.errores.contra)
      alert(datos.errores.contra);
    }
  });
  event.preventDefault();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html >
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Registro de usuario con AJAX</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <div class="col-md-6 offset-md-3">
    <form id="miFormu" role="form">
       <div class="form-group">
         <label for="txtUsuario">Nombre Usuarios</label>
         <input type="text" class="form-control" id="txtUsuario" placeholder="Introducir nombre de usuario">
       </div>
       <div class="form-group">
         <label for="txtPassword">Contraseña:</label>
         <input type="password" class="form-control" id="txtPassword" placeholder="Introducir contraseña">
       </div>

       <button type="submit" class="btn btn-default">Registrar</button>
    </form>
  </div>

  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>