javascript - 如何使用 AJAX 发送 div 元素?

标签 javascript php ajax

我想通过AJAX发送一段html内容(不是表单数据)。 我知道如何在 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);
?>

After running my above code it is just displaying Array() because Ajax method is not sending the div.

请帮助我使用 Javascript 而不是 jQuery

最佳答案

不要发送元素引用本身,获取 outerHTML 属性并发送该属性,如下所示:xhr.send(main.outerHTML);

这会发送元素的字符串版本,包括其后代。

引用:https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

关于javascript - 如何使用 AJAX 发送 div 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58130163/

相关文章:

php - 如何使用 MySQL/PHP 自动将记录分配给池中的人员,同时防止交叉分配

javascript - 如何刷新div而不重新加载整个页面?

asp.net - jQuery 函数问题

javascript - 使用 php、javascript 在 Web 应用程序中使用连接到 PC 的扫描仪

javascript - pagify.js 和重新加载/刷新 div

php - 在 Yii2 中执行原始 SQL 查询?

Javascript insideHTML 与其他页面的 session PHP

javascript - Rails 中的 j 函数有什么作用?

滚动时更改标题颜色的JavaScript

javascript - 如何生成 n 长度二进制字符串的所有可能状态?