Ajax запрос JQuery в JavaScript [закрыт]

134

27 июля 2019, 19:20

Всех с праздником! Помогите перевести Ajax запрос c JQuery на 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>

Answer 1

Есть несколько способов перевести Ajax запрос c JQuery на JS

Использовать Fetch API, но учтите, что это экспериментальная технология, которая не поддерживается старыми браузерами. Вот пример кода для вашего случая:
```
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));
```

Использовать 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);
    }
});