Как отправить элемент div с помощью AJAX?

Question

Я хочу отправить раздел содержимого html (не данных формы) через AJAX.Я знаю, как сделать это в jQuery, но я хочу достичь с помощью javascript.

HTML (я хочу отправить контент с id = stack)
после нажатия на кнопку ОТПРАВИТЬответ должен быть загружен в id = target

<div id='stack'>
    <ol>
        <li>stack 1</li>
        <li>stack 2</li>
        <li>stack 3</li>
    </ol>
</div>

<button id='btn'>SEND</button>
<article id='target'></article>

AJAX

var btn = document.getElementById('btn');
var target = document.getElementById('target');

    // Function for AJAX
    function stack(){
    var main = document.getElementById('stack');
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "process.php", true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState ==4 && xhr.status == 200){
            target.innerHTML = xhr.responseText;
        }
    }
    xhr.send(main);
    }

    // Bind with the onclick event
    btn.addEventListener('click',stack,false);

process.php

<?php
$div = $_POST;
print_r($div);
?>

После запуска моего кода выше он просто отображает Array () , потому что метод Ajax не отправляет div.

Пожалуйста, помогите мне использовать Javascript вместо jQuery

Answer 1

хорошо, ребята!Я задал вышеупомянутый вопрос и наконец успешно решил мою проблему.Поэтому я собираюсь поделиться с вами своим решением (любовь).

РЕШЕНИЕ:

---

AJAX
В одной строке кода я пропустилajax.

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

Таким образом, полный код Ajax будет -

var btn = document.getElementById('btn');
var target = document.getElementById('target');

    // Function for AJAX
    function stack(){
    var main = document.getElementById('stack');
    //*****new line added
    var data = 'key' + '=' + main.outerHTML; 
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "process.php", true);
    //*****(new line added) must add when working with POST data
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function(){
        if(xhr.readyState ==4 && xhr.status == 200){
            target.innerHTML = xhr.responseText;
        }
    }
    xhr.send(data);
    }

    // Bind with the onclick event
    btn.addEventListener('click',stack,false);

process.php

<?php
$div = $_POST;

echo $div['key'];
?>

Спасибо!

Answer 2

Не отправляйте ссылку на сам элемент, получите свойство outerHTML и отправьте его следующим образом: xhr.send(main.outerHTML);

Отправляет строковую версию элемента, включая его потомков.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML