如何将ajax与jquery一起使用以获取json文件

问题描述

我有一个要使用ajax添加到代码中的json文件。但是，我无法使其工作。我对ajax和JQuery不太了解。

json文件有一个数组，我想在js代码的不同部分使用它。另外，我创建了一个变量来分配和使用来自ajax的json文件，但我不知道如何在其余代码中使用它来获取内部数据。

下面是我遇到问题的ajax。

这是JavaScript

function Guardar() {
    datosJSON.nombre = document.getElementById('nombre').value;
    datosJSON.edad = document.getElementById('edad').value;
    datosJSON.email = document.getElementById('email').value;
    datosJSON.telefono = document.getElementById('telefono').value;
    localStorage.setItem('datosSolictante',JSON.stringify(datosJSON));
} // Cierre funcion guardar


function checkData() {
    console.log(todaInfo);
    console.log(((nombre.value) && (edad.value) && (email.value) && (telefono.value)));
    if ((nombre.value) && (edad.value) && (email.value) && (telefono.value)) {
    console.log(todaInfo);
    todaInfo.innerHTML = ` ${nombre.value} ${edad.value} ${email.value} ${telefono.value}  `;
}} // Cierre funcion checkData


window.onload = function() {
    let todaInfo = document.getElementById('todaInfo');
    let info = document.getElementById('info');
    console.log(todaInfo);
    console.log(info);
    todaInfo.innerHTML = '';
    var guardado = document.getElementById('guardado');
    guardado.addEventListener("click",function () {
    if (checkData) {
        guardado.innerHTML = "Guardado";
    }
});
};

guardado.addEventListener("click",function() {
    if ((nombre.value.length > 0) && (edad.value.length > 0) && (email.value.length > 0) && (telefono.value.length > 0)) {
        info.innerHTML += "<th>Informacion del cliente</th><tr><td>Nombre: " + nombre.value + "</tr></td><tr><td>Edad: " + edad.value + "</tr></td><tr><td>Email: " + email.value + "</tr></td><tr><td>Telefono: " + telefono.value + "</td></tr>"; 
    }
    nombre.value = "";
    edad.value = "";
    email.value = "";
    telefono.value = "";
});



var archivoAjax = $.ajax();
  
$.ajax({
      url: 'autos.JSON',dataType: 'json',success: function (data,status,jqXHR) {
        console.log(data);        
        },error: function (jqXHR,error) {
          console.log(jqXHR),console.log(`Error -> Status: ${status} - Error: ${error}`);
        }  
    });


// Constructor
class Seguro {
    constructor(marca,modelo,year,tipo,precio) {
      this.marca = marca;
      this.modelo = modelo;
      this.year = year;
      this.tipo = tipo;
      this.precio = precio;
    }
  
    // Realiza la cotización con los datos
    cotizarSeguro() {
      const base = 1000;
      let poliza = ((this.precio * 0.05) / 12);
  
      if (poliza < 1000) {
        poliza += base;
      }
      // Leer el año
      const diferencia = new Date().getFullYear() - this.year;
  
      // Cada año que la diferencia es mayor,el costo va a reducirse un 3%
      poliza -= ((diferencia * 3) * poliza) / 100;
  
      //Si el seguro es completo se multiplica por un 30% más
      if (this.tipo === 'terceros-ampliada') {
        poliza *= 1.30;
      } else if (this.tipo === 'todo-riesgo') {
        poliza *= 1.45;
      }
  
      return poliza;
    }
  }
  
  window.onload = () => {
    //Selecciono los select de Marca y Modelo
    const selectMarca = document.querySelector('#marca');
    const selectModel = document.querySelector('#modelo');
  
    //Selecciono el formulario
    const formulario = document.querySelector('#cotizar-seguro');
  
    //Manejador de evento "submit" del formulario
    formulario.addEventListener('submit',cotizarSeguro);
  
    //Llamo función lista select para armar un arreglo con las distintas marcas
    const marcas = listaSelect(archivoAjax,"marca");
  
    //Cargo las marcas en el Select
    cargarContenido(marcas,selectMarca);
  
    //Cargar fechas
    llenarFecha();
  
    //Manejador de evento "change" del select de marca (Cuando el usuario selecciona una marca)
    selectMarca.addEventListener('change',(e) => {
      //Borro el contenido del select de Modelo
      selectModel.innerHTML = '<option value=""> Seleccionar </option>';
  
      //Filtro el arreglo de autos y me quedo con los que tienen la marca seleccionada
      const modelos = archivoAjax.filter(elem => elem.marca.toLowerCase().replace(' ','-') == e.target.value);
  
      //Llamo función lista select para armar un arreglo con los distintos modelos
      const listaModelos = listaSelect(modelos,"modelo");
  
      //Cargo los modelos en el select de modelos
      cargarContenido(listaModelos,selectModel);
    });
  } // Cierre de windows.onload
  
  //Función para generar y cargar en el select de Año los distintos años
  function llenarFecha() {
    const max = new Date().getFullYear(),min = max - 70;
  
    const selectYear = document.querySelector('#year');
  
    for (let i = max; i > min; i--) {
      let option = document.createElement('option');
      option.value = i;
      option.textContent = i;
      selectYear.appendChild(option);
    }
  } // Cierre funcion llenarFecha
  
  // Cargo contenido en los Select
  function cargarContenido(array,select) {
    array.forEach(element => {
      let option = document.createElement('option');
      option.value = element.toLowerCase().replace(' ','-');
      option.textContent = element;
      select.appendChild(option);
    })
  } // Cierre funcion cargarContenido
  
  
  // Genero listado (arreglo) para los select
  function listaSelect(array,key) {
    const listado = [];
  
    array.forEach(elem => {
      if (!listado.includes(elem[key])) {
        listado.push(elem[key]);
      }
    })
    return listado.sort();
  } // Cierre funcion listaSelect
  
  //Función manejadora para el evento "submit" del formulario
  function cotizarSeguro(e) {
    e.preventDefault();
  
    // Leer la marca seleccionada
    const marca = document.querySelector('#marca').value;
  
    // Leer la marca seleccionada
    const modelo = document.querySelector('#modelo').value;
  
    // Leer el año seleccionado
    const year = document.querySelector('#year').value;
  
    // Leer el tipo de cobertura
    const tipo = document.querySelector('input[name="tipo"]:checked').value;
  
    //Verifico que no haya campos vacíos
    if (marca === '' || modelo === '' || year === '' || tipo === '') {
      mostrarMensaje('Todos los campos son obligatorios','error');
      return;
    }
  
    mostrarMensaje('Cotizando...','exito');
  
    // Ocultar las cotizaciones previas 
    const resultados = document.querySelector('#resultado div');
    if (resultados != null) {
      resultados.remove();
    }
  
    //Busco el precio del modelo seleccionado
    price = archivoAjax.find(elem => (elem.marca.toLowerCase().replace(' ','-') == marca.toLowerCase() && elem.modelo.toLowerCase().replace(' ','-') == modelo.toLowerCase()));
  
    // Instanciar el seguro
    const seguro = new Seguro(marca,price.precio);
  
    //Llamo al método cotizarSeguro de la clase Seguro
    const valorPoliza = seguro.cotizarSeguro();
  
    // Muestro resultado de la cotización
    mostrarResultado(valorPoliza,seguro);
  } // Cierre funcion cotizarSeguro
  
  //Función para mostrar un mensaje
  function mostrarMensaje(mensaje,tipo) {
    //Creo un div para mostrar el mensaje
    const div = document.createElement('div');
  
    if (tipo === 'error') {
      div.classList.add('error');
    } else {
      div.classList.add('correcto');
    }
  
    //Agrego clases y contenido al div
    div.classList.add('mensaje','mt-10');
    div.textContent = mensaje;
  
    // Insertar en el HTML
    const formulario = document.querySelector('#cotizar-seguro');
    formulario.insertBefore(div,document.querySelector('#resultado'));
  
    //Mantener el mensaje por 2 segundos y después borrarlo
    setTimeout(() => {
      div.remove();
    },2000);
  } // Cierre funcion mostrarMensaje
  


  //Función para mostrar el resultado del cálculo de la póliza
  function mostrarResultado(valorPoliza,seguro) {
  
    //Destructuring del objeto seguro
    let {marca,precio } = seguro;
  
    //Configuro un formateador para la poliza y otro para el precio del auto
    const options1 = { style: 'currency',currency: 'ARS',minimumFractionDigits: 0 };
    const options2 = { style: 'currency',minimumFractionDigits: 2 };
    const formatoPrecio = new Intl.NumberFormat('es-AR',options1);
    const formatoPoliza = new Intl.NumberFormat('es-AR',options2);
  
    // Creo div para mostrar resultado
    const div = document.createElement('div');
    div.classList.add('mt-10');
  
    div.innerHTML = `
      <p class="header">Resumen de Cotización para ${datosJSON.nombre}</p>
      <p class="font-italic">Marca: ${marca.toUpperCase().replace('-',' ')} </p>
      <p class="font-italic">Modelo: ${modelo.toUpperCase().replace('-',' ')}  </p>
      <p class="font-italic">Año: ${year} </p>
      <p class="font-italic">Suma Asegurada: ${formatoPrecio.format(precio)}  </p>
      <p class="font-italic">Tipo de Cobertura: ${tipo.toUpperCase().replace('-',' ')}  </p>
      <p class="font-italic">Suma Asegurada: ${formatoPoliza.format(valorPoliza)}  </p>
      `;
  
    //Selecciono el div "#resultado" donde voy a insertar la información
    const resultadoPoliza = document.querySelector('#resultado');
  
    // Mostrar el spinner
    const spinner = document.querySelector('#cargando');
    spinner.style.display = 'block';
  
    setTimeout(() => {
      //Luego de 2 segundos quito el spinner y muestro los resultados
      spinner.style.display = 'none';
      resultadoPoliza.appendChild(div);
    },2000);
  } // Cierre funcion mostrarResultado

我不怎么访问该数据：我尝试了archivoAjax.success或archivoData.ajax等，但是它不起作用。

json文件的数组是这样的：

[{"marca":"Toyota","modelo":"RAV4","precio":709892},{"marca":"Mitsubishi","modelo":"Endeavor","precio":606888},{"marca":"Honda","modelo":"Accord","precio":498929},]

这是HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Cotizador de Seguros</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="Style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>    <!-- <script defer src="autos.js"></script> -->
    <script defer src="variables.js"></script>    
    <script defer src="cotizadordeauto.js"></script>
</head>
<body>
  <div class="topnav">
        <!-- <a class="active" href="#home">Home</a> -->
      <h1>Seguros Sunshine</h1>       
  </div>
  <div>
    <h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
    <p id="intro">Contamos con tres diferentes productos para satisfacer tus necesidades. Seguros contra Terceros,que cubre aquellas terceras personas involucradas en cualquier accidente. A su vez contamos con una oferta un poco mas ampliada con la opcion Terceros Ampliada,que incluye granizo o robo q hayas sufrido. Por ultimo tenemos un seguro contra todo riesgo llamado Riesgo Total donde te garantiza la total cobertura de tu vehiculo. A continuacion los podes ver con mas detalle.</p>
    <div>
      <table class="table table-bordered table-info" id="productos">
        <thead>
          <tr>
            <th scope="col">Tipo de Seguro</th>
            <th scope="col">Responsabilidad civil</th>
            <th scope="col">asistencia en ruta</th>
            <th scope="col">Granizo</th>
            <th scope="col">Robo</th>
            <th scope="col">Incendio</th>
            <th scope="col">Remolque ilimitado</th>
            <th scope="col">Vehiculo de sustitucion</th>
            <th scope="col">Daños propios</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Terceros</th>
            <td>&#10003</td>
            <td>&#10003</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Terceros Ampliada</th>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Todo Riesgo</th>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
            <td>&#10003</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <p id="todaInfo"></p>
  <div class="container" id="preguntas">        
      <br>
      <br>
      <h3>Ingresa tus datos para iniciar una cotizacion</h3>
      <table class="table table-striped">    
      <thead>
          <input type="text" id="nombre" class="no-outline" placeholder="Nombre">
          <input type="number" id="edad" class="no-outline" placeholder="Edad">
          <input type="email" id="email" class="no-outline" placeholder="Email">
          <input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
          <div>
            <button onclick="Guardar()" id="guardado">Guardar</button>
          </div>
      </thead>
      <tbody id="info" class="shadow">          
      </tbody>
      </table>
  </div>
  <br> 
  <div class="container shadow col-lg-6">
      <div id="contenido" class="pb-auto" style="display: block">
        <header class="p-3 bg-info text-white text-uppercase rounded">
          <h1 class="text-center">Cotiza tu auto aqui</h1>
        </header>
        <form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
          <div class="d-flex align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
            <select class="d-flex mt-2 p-3 rounded" id="marca">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
            <select class="d-flex mt-2 p-3 rounded" id="modelo">
              <option value="" disabled selected> Seleccionar </option>
            </select>
          </div>
          <div class="d-flex justify-content-around align-items-center mb-5">
            <label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
            <select class="d-flex p-3 rounded" id="year">
              <option value="" disabled selected> Seleccionar </option>
            </select>
            <label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
            <input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
          </div>
          <fieldset>
            <legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>    
            <div class="d-flex justify-content-around mt-5">
              <div>
                <label class="font-weight-bold text-uppercase mr-2">Terceros</label>
                <input type="radio" name="tipo" value="terceros" checked>
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Terceros Ampliada</label>
                <input type="radio" name="tipo" value="terceros-ampliada">
                </label>
              </div>
              <div>
                <label class="font-weight-bold  text-uppercase mr-2">Todo Riesgo</label>
                <input type="radio" name="tipo" value="todo-riesgo">
                </label>
              </div>
            </div>
          </fieldset>
    
          <div id="cargando" style="display: none">
            <div class="spinner">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
          <div id="resultado"></div>
          <div class="d-flex justify-content-center py-4">
            <button type="submit"
                class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
            </button>
          </div>
    
        </form>
      </div>
    </div>
     <!--Cierre del form y container-->
    <br>
  
  <!-- <div class="d-flex">
    <footer class="page-footer">
      <div class="text-center">© 2020 Copyright Seguros Sunshine</div>      
    </footer>
  </div> -->
</body>
</html>

解决方法

我找到了一个解决方案，我将ajax函数放在windows.onload中，并且可以正常工作。

window.onload = () => {
    $.ajax({
      url: 'autos.JSON',dataType: 'json',success: function (data,status,jqXHR) {
        console.log(data);  
            //Selecciono los select de Marca y Modelo
    const selectMarca = document.querySelector('#marca');
    const selectModel = document.querySelector('#modelo');
  
    //Selecciono el formulario
    const formulario = document.querySelector('#cotizar-seguro');
  
    //Manejador de evento "submit" del formulario
    formulario.addEventListener('submit',cotizarSeguro);
  
    //Llamo función lista select para armar un arreglo con las distintas marcas
    const marcas = listaSelect(data,"marca");
  .......