All the holiday! Help translate Ajax request with jQuery to JS

$('#btn_toggle').on('click', function() { $('.catalog li').each(function(i) { $(this).toggleClass('list'); }); $(this).text(function(i, text) { return text == 'variable1' ? 'variable2' : 'variable1'; }); }); $('#btn_more').on('click', function() { console.log(111); $.ajax({ url: 'ajax_more.php', type: 'post', dataType: 'json', success: function(data) { if (data.result == 'success') { $('#catalog').append(data.html); } } }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn_toggle">variable1</button> <ul class="catalog" id="catalog"> <li>TBD!</li> </ul> <button id="btn_more">More</button>

Closed due to the fact that off-topic participants Stepan Kasyanenko , 0xdb , aleksandr barakin , Air , Eugene Krivenja January 9 at 12:32 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • " Learning tasks are allowed as questions only on the condition that you tried to solve them yourself before asking a question . Please edit the question and indicate what caused you difficulties in solving the problem. For example, give the code you wrote, trying to solve the problem "- Stepan Kasyanenko, 0xdb, aleksandr barakin, Eugene Krivenja
If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    There are several ways to translate an Ajax request with jQuery to JS

    1. Use the Fetch API , but note that this is an experimental technology that is not supported by older browsers .
      Here is a sample code for your case:

        fetch ('ajax_more.php',
     {
         method: 'POST'
     }
 )
 .then (data => data.json ())
 .then ((data) => {
     if (data.result == 'success') {
         $ ('# catalog'). append (data.html);                        
     }
 })
 .catch (err => console.log (err));

    2. Use XMLHttpRequest

        function ajax (url, success) {
     var request = new XMLHttpRequest ();
     request.open ('POST', url, true);
     request.setRequestHeader ('Content-Type', 'application / json; charset = UTF-8');
     request.send ({});
     request.onreadystatechange = function () {
         if (request.readyState == 4 && request.status == 200) {
             try {
                 var data = JSON.parse (request.responseText);
                 success (data);
             } catch (err) {
                 console.log (err);
             }              
         }
     }
 }

 ajax ('ajax_more.php', function (data) {
     if (data.result == 'success') {
         $ ('# catalog'). append (data.html);
     }
 });
    • Add JSON parsing to version with XHR - user3127286
    • @ user3127286 for sure, thanks - Vladimir