如何在 javascript 中执行 ajax 回调
how to do ajax callback in javascript
我的情况是,我在 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>
`
})
}
}
你应该进入 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);
查看此示例
我的情况是,我在 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>
`
})
}
}
你应该进入 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);
查看此示例