我想使用按钮在Ajax请求english.json和french.json之间切换，但我不确定如何切换。有人能帮我吗？下面的代码simple只是调用JSON中的每个对象。
<!doctype html>
<html>
<body>
<h1> Frenching</h1>
<button id="toggle"> toggle</button>
<p> This program changes names from English to French</p>
<h3 id="name"> </h3>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script>
//Ajax request
$("document").ready(function () {
$.getJSON("French.json").done(function (french) {
console.log(french.lastName)
});
$.getJSON("english.json").done(function (english) {
console.log(english.lastName)
});
});
</script>
//seperate files
French.Json
{
"firstName": "Merci",
"lastName": " Claudè"
}
English.Json
{
"firstName": "Gracias",
"lastName": "Claude"
}
我创建了一个全局对象来将对象存储在JSON中，然后我创建了触发英语和法语JSON的切换函数。
//sets a global variable
var globalState = {
viewState: true,
english: null,
french: null
};
//toggles function
$("#toggle").click(function toggleGlobalState () {
globalState.viewState = !globalState.viewState; // sets the viewState object to false
console.log(globalState); // toggles true and false
if(globalState.viewState) { // if true change name to french
$("#firstname")[0].innerHTML = globalState.french.firstName
$("#lastname")[0].innerHTML = globalState.french.lastName
} else { // if false change name to english
$("#firstname")[0].innerHTML = globalState.english.firstName
$("#lastname")[0].innerHTML = globalState.english.lastName
}
});
//Ajax request
$("document").ready(function () {
$.getJSON("French.json").done(function (french) {
globalState.french = french; // sets the french name objects in the json to a global object
$("#firstname")[0].innerHTML = globalState.french.firstName
$("#lastname")[0].innerHTML = globalState.french.lastName
}).then(function(result) {
console.log(globalState.french.firstName); //checks
});
$.getJSON("english.json").done(function (english) {
globalState.english = english; // sets the english name objects in the json to a global object
});
});
如果您不介意同时调用两个Ajax请求，那么应该将结果存储在一个变量中，并切换结果。
var eng;
var fr;
$("document").ready(function () {
$.getJSON("French.json").done(function (french) {
fr = french;
});
$.getJSON("english.json").done(function (english) {
eng = english;
});
});
如果只想在需要时触发ajax，那么应该在按下按钮时触发它。
var lang;
$("document").ready(function () {
toggle = function (json) {
$.getJSON(json).done(function (lang) {
lang = french;
});
}
});