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

Question

I am using a simple ajax call on load and onclick,I am using function for it.Here my ajax call url is different onload and onclick,I have used function and different parameter but its still showing previous json using onclick. Below is my code, Updated in plunker 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

You need to make your reload_cart function accept a parameter 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"); }); }); 

Answer 2

You need to pass the json file name in reload_cart() function and check if file name is passed then read from this file(1.json) else read from another file(2.json). Please your javascript code to following:

$(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);
    });
});

I have updated your Plunker