在HTML页面中显示Ajax响应

Question

I looked over tens of similar questions but I couldn't find the solution I needed. Sorry in advance if this is a duplicate. I want to show the Ajax response in the page, once the window is loaded.

Code

HTML

<ul class="rate-ul">
    <li id="LTL">LTL Freight</li>
</ul>

and the jquery part to change it is:

Javascript/jQuery

if(condition){
$("#LTL").change(UpdateLTLRating);
}
function UpdateLTLRating() {
    console.log("update shipping called");
    $.ajax({
        url: window.location.href,
        data: 'call=ajax&method=ltlRateList&'
        type: 'POST',
        success: function (resp) {
        console.log(resp)
        $(".rate-ul").html(resp);
        },
         error: function (xhr, status) {
            alert("Sorry, there was a problem!");
        }
    });

I get the update shipping called in the console, but I don't get resp called on the windows load. When I attach it to a button click event, I get the resp in the console as well. I haven't been able to get resp on the page.

Answer 1

From your sample, it's not clear that you're even calling your function on window load to get the data you want, if this is the case in your original code, here's how you can do it:

if(condition){
    $("#LTL").change(UpdateLTLRating);
}
function UpdateLTLRating() {
    console.log("update shipping called");
    $.ajax({
        url: window.location.href,
        data: 'call=ajax&method=ltlRateList&'
        type: 'POST',
        success: function (resp) {
        console.log(resp)
        $(".rate-ul").html(resp);
        },
         error: function (xhr, status) {
            alert("Sorry, there was a problem!");
        }
    });
}

$(document).ready(function() {
    UpdateLTLRating();
});