如何使用功能在 jquery 中使用 onload 和 onclick 调用不同的 ajax 调用

Question

我在加载和点击时使用一个简单的ajax调用，我正在使用函数。在这里，我的 ajax 调用网址是不同的 onload 和 onclick，我使用了函数和不同的参数，但它仍然使用 onclick 显示以前的 json。下面是我的代码， 在普伦克 https://plnkr.co/edit/YOeklbX5shZCnHVRktyK?p=preview 中更新

.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<div id="critical">
<span id="name1"></span> : <span id="value1"></span>
</div>
<div id="major">
<span id="name2"></span> : <span id="value2"></span>
</div>
<div id="minor">
<span id="name3"></span> : <span id="value3"></span>
</div>
<button>click</button>

JavaScript

$(document).ready(function(){
$.fn.reload_cart = function(){ 
$.ajax({
type: "GET",
url: "1.json",
success: function(result) {
$("#name1").text(result.critical[0].name);
$("#value1").text(result.critical[0].value);
$("#name2").text(result.major[0].name);
$("#value2").text(result.major[0].value);
$("#name3").text(result.minor[0].name);
$("#value3").text(result.minor[0].value);
}
});
}
$.fn.reload_cart(); 
$("button").click(function(){
var url2;
$.fn.reload_cart(url2); 
url2: "2.json";
});
});

1.json

{
"critical": [{
"name": "critical",
"value": "50"
}],
"major": [{
"name": "major",
"value": "40"
}],
"minor": [{
"name": "minor",
"value": "20"
}]
}

2.json

{
"critical": [{
"name": "criticalnew",
"value": "53"
}],
"major": [{
"name": "majornew",
"value": "43"
}],
"minor": [{
"name": "minornew",
"value": "23"
}]
}

Answer 1

您需要在函数中传递json文件名reload_cart()并检查文件名是否传递，然后从此文件(1.json(读取，否则从另一个文件(2.json(读取。请将您的javascript代码如下：

$(document).ready(function(){
$.fn.reload_cart = function(url){
if(!url){
url = "1.json"
}
$.ajax({
type: "GET",
url: url,
success: function(result) {
$("#name1").text(result.critical[0].name);
$("#value1").text(result.critical[0].value);
$("#name2").text(result.major[0].name);
$("#value2").text(result.major[0].value);
$("#name3").text(result.minor[0].name);
$("#value3").text(result.minor[0].value);
}
});
}
$.fn.reload_cart(); 
$("button").click(function(){
var url2 = "2.json";
$.fn.reload_cart(url2);
});
});

我已经更新了你的普伦克

Answer 2

你需要让你的reload_cart函数接受参数url。

$(document).ready(function() {
$.fn.reload_cart = function(url) {
$.ajax({
type: "GET",
url: url,
success: function(result) {
$("#name1").text(result.critical[0].name);
$("#value1").text(result.critical[0].value);
$("#name2").text(result.major[0].name);
$("#value2").text(result.major[0].value);
$("#name3").text(result.minor[0].name);
$("#value3").text(result.minor[0].value);
}
});
}
$.fn.reload_cart("1.json");
$("button").click(function() {
$.fn.reload_cart("2.json");
});
});