1

Buenas noches desarrolladores estoy intentando guardar un registro en mi base de datos usando ajax, jquery aunque estoy algo pegado en como iniciar por alli recibi un consejo usando este codigo:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Pantalla Opciones</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Styles.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
<div class="row">
                    @if (ViewData["Motivos"] != null)
                    {
                        foreach (var motivo in (List<EntradaElectronicaAlmacen.Models.Dtos.Motivo>)ViewData["Motivos"])
                        {
                            <div class="col-sm-3">
                                <button id="@motivo.Motivo_Id.ToString()-btn" class="boton3d5 clMotivo" data-id="@motivo.Motivo_Id" data-toggle="modal" data-target="#PopUpAcceso">
                                    @motivo.Descripcion
                                </button>
                            </div>
                        }
                    }                   
                </div> 
<script>
   var fa = new Date().toLocaleDateString();
        $("#txtFecha").val(fa);

        var ha = new Date().toLocaleTimeString();
        $("#txtHoraEntrada").val(ha);
        $("#txtGafete").keypress(function (e) {
            if (e.keyCode === 13) {
                var gafete = $("#txtGafete").val();
                var mm;
                $.ajax({
                    url: "http://localhost:49851/api/empleadoAutorizado/" + gafete,
                    method: "GET",
                    contentType: "application/json",
                    success: function (data) {
                        if (data == null) {
                            ocultarPopUp();
                        } else {
                            $("#txtNombre").val(data.nombre);
                        }
                    }
                });
            }
        });
</script>

</body>
</html>

La funcion de guardar debe completarse al dar click en el boton que pueden ver en el boby solo necesito una guia usando ajax, la que se ve el keyPress la estoy usando para consumir algunos datos en la vista, me dijeron que se puede hacer algo parecido tambien para guardar pero no tengo mucha experiencia usando ajax y jquery.

3
  • de donde provienen los datos que vas a insertar? De algún formulario o son datos que van cambiando dinámicamente y los tienes almacenados en variables js?
    – DMA VE
    Commented el 3 abr. 2018 a las 10:49
  • Voy a poner un ejemplo para ayudarle en algo. Commented el 3 abr. 2018 a las 13:53
  • Los datos se generarian en unos textbox para luego guardarlos en la base de datos
    – Reyes
    Commented el 3 abr. 2018 a las 18:16

2 respuestas 2

2

jQuery .submit()

Antes de todo, tienes que estudiar la manipulación de datos con jQuery por el sitio oficial: http://api.jquery.com/submit/

En JavaScript :

  • va a llamar al submit por la ID target
  • cancelar la acción de submit con preventDefault() del evento
  • crear query string con los datos del formulário con serialize()
  • llama a $.ajax() o $post() para enviar sus datos al servidor

Un ejemplo abajo:

$("#target").submit(function(event) {
    event.preventDefault();

    var datos = jQuery(this).serialize();

    jQuery.ajax({
        type: "POST",
        url: "procesa.php",
        data: datos,
        success: function(data)
        {
            console.log("respuesta: ", data);
        }
    });
});

Y ese es el formulario HTML:

<form id="target" action="destination.html">
  <input type="text" name="hello" value="Hello there" />
  <input type="submit" value="Go" />
</form>

Espero tener ayudado en algo! :)

0

mira navegando en varios foros y tomando en cuenta el codigo que me dejaste formule este codigo pero aun no me guarda en la base de datos talves alguien podria decirme que le falta o sera que debo serializar el json en el controller para guardar en la base de datos

<script>
$(".clMotivo").click(function (event) {
            var id = $(this).attr("data-id");
            var data = $(this).serialize();
            var gafete = $("txtGafete").val();
            var datos = {};
            datos = {
                motivo_Id: id,
                gafete: gafete
            };
            $.ajax({
                url: "http://localhost:49851/api/visita/agregar",
                method: "POST",
                data: JSON.stringify(datos),
                contentType: "aplication/json",
                success: function (data) {
                    alert(data);
                    ocultarPopUpAcceso();
                }
            });            
        });
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.