0

Buenas comunidad estoy tratando de consumir una api Rest que tengo enviando datos de un formulario en asp.net pero no entiendo como realizar el envió por jQuery y Ajax he visto algunos tutoriales pero tengo solo el siguiente código, soy nuevo en esto de jQuery por lo que estoy tratando de aprender a realizar este envió a la api que desarrolle.

Aquí es el método que estoy tratando de usar para enviar los valores a la api que tengo 
hecha pero no entiendo como hacer el envió, trate de hacerlo de una forma que vi por 
internet pero no me dio resultado, no se que me falta para realizar bien el envió a la 
api o si es que estoy haciendo algo mal al enviar los datos, encontre esta otra forma de enviar datos pero no se que mas me falta

    <script>
        $(function () {
        $.ajax({
            type: "POST",
            url: "https://localhost:44345/api/DTE/Factura",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response.IsSuccess == true) {
                    var tipoDocumento = $("#TipoDocumento").val()
                    var folio = $("#Folio").val();
                    var rutEmisorDoc = $("RUTEmisorDocumento").val();
                    var razonSocial = $("#RznSocEmisor").val();
                    var correoEmisor = $("#CorreoEmisor").val();
                    var giroEmisor = $("#GiroEmisor").val();
                    var telefono = $("#Telefono").val();
                    var acteco = $("#Acteco").val();
                    var sucursal = $("#Sucursal").val();
                    var csgSiiSucursal = $("#CdgSIISucursal").val();
                    var dirOrigen = $("#DirOrigen").val();
                    var cmnaOrigen = $("#CmnaOrigen").val();
                    var ciudadOrigen = $("#CiudadOrigen").val();
                }
            }
        });
    });
    </script>

2 respuestas 2

1

Para enviar informacion con ajax puedes hacerlo de la siguient forma

   let body = {
        Id: $("#textoEjemplo").val(),
        textoEjemplo: $("#textoEjemplo2").val()
    }
    $.ajax({
        type: 'POST',
        url: GetWebApiUrl() + `EjemploDeEndpoint`,
        async: true,
        contentType: "application/json",
        //Aca envias la informacion
        data: JSON.stringify(body),
        success: function (data, status, jqXHR) {
            //Esto se ejecuta si la operacion fue exitosa
            //Por ejemplo algun mensaje que confirme que se guardo la informacion
        },
        error: function (jqXHR, status) {
            console.log(jqXHR);
        }
    });

En tu ejemplo le estas enviado un string con dos llaves "{}", en lugar de enviar eso.. deberias rescatar la informacion de tu formulario y enviarla en el data de la funcion ajax

3
  • Entiendo pero la data que envio donde me dices es de la misma forma que rescato los valores del formulario o es de otra forma?
    – Andres Edu
    Commented el 5 may. 2022 a las 14:46
  • Te recomiendo que obtengas la informacion del formulario, la valides, tranformes o lo que se necesite para evitar errores... y después realizar la petición ajax.. en tu ejemplo segun veo estas recopilando la información en l .done(res=>).. y eso esta mal porque eso solo se va a ejecutar si la petición ajax fue exitosa no antes..
    – David081
    Commented el 5 may. 2022 a las 14:49
  • Intenta adaptando tu código a el ejemplo que te di, y si te sirvió mi respuesta márcala como aceptada, saludos!.
    – David081
    Commented el 5 may. 2022 a las 14:50
1

El AJAX hace solicitud de peticiones asíncronas, por tanto tienes que fijarte en tu código si trabaja de esa manera o de lo contrario la lógica te botará error.

Puedes probar bien con el async: false si trabajas con lógica síncrona o el async: true si trabajas con promesas.

$.ajax({
            type: "POST",
            url: "https://localhost:44345/api/DTE/Factura",
            async: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                if (response.IsSuccess == true) {
                    var tipoDocumento = $("#TipoDocumento").val()
                    var folio = $("#Folio").val();
                    var rutEmisorDoc = $("RUTEmisorDocumento").val();
                    var razonSocial = $("#RznSocEmisor").val();
                    var correoEmisor = $("#CorreoEmisor").val();
                    var giroEmisor = $("#GiroEmisor").val();
                    var telefono = $("#Telefono").val();
                    var acteco = $("#Acteco").val();
                    var sucursal = $("#Sucursal").val();
                    var csgSiiSucursal = $("#CdgSIISucursal").val();
                    var dirOrigen = $("#DirOrigen").val();
                    var cmnaOrigen = $("#CmnaOrigen").val();
                    var ciudadOrigen = $("#CiudadOrigen").val();
                }
            }
        });
  • El success es como el .done(), funciona igual, de todas formas te recomiendo probar con ambos. Con el .done() el código quedaría así:
$.ajax({
            type: "POST",
            url: "https://localhost:44345/api/DTE/Factura",
            async: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
        }).done( response => {
                if (response.IsSuccess == true) {
                    var tipoDocumento = $("#TipoDocumento").val()
                    var folio = $("#Folio").val();
                    var rutEmisorDoc = $("RUTEmisorDocumento").val();
                    var razonSocial = $("#RznSocEmisor").val();
                    var correoEmisor = $("#CorreoEmisor").val();
                    var giroEmisor = $("#GiroEmisor").val();
                    var telefono = $("#Telefono").val();
                    var acteco = $("#Acteco").val();
                    var sucursal = $("#Sucursal").val();
                    var csgSiiSucursal = $("#CdgSIISucursal").val();
                    var dirOrigen = $("#DirOrigen").val();
                    var cmnaOrigen = $("#CmnaOrigen").val();
                    var ciudadOrigen = $("#CiudadOrigen").val();
                }
});

  • Para lo del envío del formulario, te recomiendo que todo lo trabajes en una function() y que esta haga un return de algún valor que te indique que todo haya salido bien en la operación. Además en antes de que inicies con el $.ajax({}) puedes declarar esas variables que tienes en el sucess, algo así:
function prueba(){

var tipoDocumento; 
var folio;
var rutEmisorDoc; 

// todas las demás variables...

$.ajax({

 //lógica...

})

}
4
  • a ver si te entendi me dices que en la funcion haga la declaracion de variables y en el ajax use esas variables con los valores del formulario para el envio a la api?
    – Andres Edu
    Commented el 5 may. 2022 a las 15:09
  • Para que hagas el envío de los valores del formulario a la API tienes que hacerlo a través del data: {}, la respuesta que te mandará el ajax la trabajas desde el success o el .done(). Por lo que entendí de tu código, en el response del ajax quieres asignar valores y no puedes hacerlo directamente en el success porque te dará error cuando quieras obtener el valor de las variables que asignaste, es por eso que te recomendé hacerlo en una función.
    – lsanchezo
    Commented el 5 may. 2022 a las 15:12
  • aa entonces dentro del data envio los valores del formulario hacia la api eso queria entender gracias bro
    – Andres Edu
    Commented el 5 may. 2022 a las 15:16
  • De nada bro, si te sirvió márcala como respondida así la comunidad entiende que ya hay una respuesta a esta pregunta. Saludos 🤙
    – lsanchezo
    Commented el 5 may. 2022 a las 18:59

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.