Как сделать обратный вызов AJAX в JavaScript

Question

Мой сценарий: у меня есть статические данные, которые загружаются в div, после загрузки мне нужно сделать ajax-вызов и переопределить статические данные новыми данными, как сделать следующее в javascript

Поскольку я новичок в lit-element, я не знаю, как сделать использование функции обратного вызова в замешательстве. как только div загружен, мне нужно сделать ajax-вызов и переопределить статические данные новыми данными. Я застрял, пожалуйста, помогите или любые альтернативы

import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
export class Example extends LitElement {
  static get properties() {
    return {
      staticobj: {type: Object}
   }
 }

constructor() {
    super();
   this.static=[{
     id: "value1",
     country: "TH",
     fee: 100   
   },{
    id:"value2",
    country: "SG",
    fee: 200
  }]
}

handleCall(id){
 $.ajax({
   url: "/en",
   method: 'get',
   global: false,
   async: false,
   data: {
     value: id
   },
   success: function (data) {
     callback(data, passData)
   }
 })
this.static=data; //override the static data
}

render(){
   this.static.map((e)=>{  
    return html`
   <div id="list">// call the ajax function once div loaded
     <p>${e.id}</p>
     <h6>${e.country}</h6>
     <h5>${e.fee}</h5>

  </div>
   `
   })
 }
}

Answer 1

Вы должны войти в настрой ES6 и LitElement. Забудьте JQuery и используйте fetch (желательно с ES8 async/await). Получите ваши данные в LitElement firstUpdated(). Затем замените сам ваш массив (изменения не будут видны, если вы замените сами элементы массива, потому что изменение не будет отображено):

import { html, css, LitElement } from 'lit-element';

export default class FetchLit extends LitElement {
  static get styles() {
    return css`
      :host {
        display: block;
        padding: 5px;
      }
    `;
  }

  static get properties() {
    return {
      users: { type: Array },
    };
  }

  constructor() {
    super();
    this.users = [
      {
        firstName: 'Jane',
        lastName: 'Doe',
        email: 'jane.doe@somewhere.com',
      },
    ];
  }

  // Don't use connectedCallback() since it can't be async
  async firstUpdated() {
    await fetch(`https://demo.vaadin.com/demo-data/1.0/people?count=10`)
      .then(r => r.json())
      .then(async data => {
        this.users = data.result;
      });
  }

  render() {
    return html`
      <ul>
        ${this.users.map(
          u =>
            html`
              <li>${u.lastName}, ${u.firstName} - ${u.email}</li>
            `,
        )}
      </ul>
    `;
  }
}

window.customElements.define('fetch-lit', FetchLit);

Вы можете увидеть этот пример на https://stackblitz.com/edit/fetch-lit