一个关于textarea标签如何用js获取的问题
我搞了个md编辑器的代码,前端html加js,然后后端是django。
这个逻辑也很简单,就是用户在一个文本框里输入一串md代码,前端通过js去服务器里的/tool/md路径获取文本框里翻译出来的html再嵌套到html里。
现在的问题是那个js获取的内容好像不是动态的,不是跟着用户输入的来的。
下面是前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</head>
<body>
<textarea class="form-control" rows="3" id = "md">321354164</textarea>
<div id="bc">41651</div>
<script>
function md(){
var text = document.getElementById('md').innerHTML
//window.alert(text);
//{#var text = document.getElementById('mdbc').innerHTML;#}
const xhr = new XMLHttpRequest()
xhr.open("post", "/tool/md/")
xhr.onreadystatechange = function(event) {
if (xhr.status == 200) {
const response = JSON.parse(xhr.responseText)
console.log("服务器响应数据: ", response)
document.getElementById("bc").innerHTML = response.html;
}
}
const data = {
md:document.getElementById('md').innerHTML,
}
// 请选择1、2、3的其中一种格式去请求
// 1. json 格式请求
// 2. urlencode请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
const str = Object.keys(data)
.map(key => {
return `${key}=${encodeURIComponent(data[key])}`
})
.join("&")
xhr.send(str)
}
//md()
setInterval(md, 1000);
// 3. form data 请求
</script>
</body>
</html>