Save record in the database with ajax?

Question

Save record in the database with ajax?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Good evening developers I am trying to save a record in my database using ajax, jquery although I am somewhat stuck on how to start there, I received a tip using this code:

<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>

The save function must be completed by clicking on the button that can be seen in the boby, I just need a guide using ajax, the one that I see the keyPress I am using it to consume some data in the view, they told me that it can be do something similar also to save but I do not have much experience using ajax and jquery.

javascript jquery ajax mvc

asked by Reyes 03.04.2018 в 02:51

source

2 answers

Script with docx-python does not save the new file CSS import into another CSS and laravel mix

score 1 · Answer 1

jQuery .submit ()

First of all, you have to study data manipulation with jQuery from the official site: link

In JavaScript:

will call submit by ID target
cancel the submit action with preventDefault() of the event
create query string with the data of the form with serialize()
call $.ajax() or $post() to send your data to the server

An example below:

$("#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);
        }
    });
});

And that's the HTML form:

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

I hope to have something in mind! :)

score 0 · Answer 2

look at several forums and taking into account the code that you left me formulate this code but still does not keep me in the database so could someone tell me what is missing or will be that I must serialize the json in the controller to save on the database

<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>