Question

我是编码的新手，我需要你的专业知识帮助。

这是我的index.php代码

<div class="container">
    <div class="row text-center"><h1>Stamford Network</h1></div>
    <div class="row">
        <div class="col-md-9">
            <input type="textarea" name="text" placeholder="What's on your mind?" class="form-control" id="info" /> 
            <input type="button" name="post" value="Post" class="btn btn-primary" id="post" />
        </div>
        <div class="col-md-3">
            <h3>Hello, 
            <?php echo $_SESSION['username']; ?> 
            </h3>
            <a class="btn btn-primary" href="login.php" role="button" >Logout</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
        <h4 id="display"></h4>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>

我的.js代码链接到上面的index.php

window.onload = function() {
    var button = document.getElementById("post");
    button.addEventListener("click",
        function() {
            document.getElementById("display");

    });
}

任何人都可以告诉我如何创建帖子并在不刷新页面的情况下显示它。只需单击“发布”按钮，信息就会显示在发布表单下方。单击按钮时，textarea中的单词应该消失请只显示javascript方式

Answer 1

试试这个。

absolute

Answer 2

var button = document.getElementById('post'),
    info = document.getElementById('info'),
    display = document.getElementById('display');
button.addEventListener('click', function(){
    display.innerText = info.value;
    info.value = '';
});

如果您希望将值上传到服务器进行处理，则需要在事件监听器中添加ajax XMLHttpRequest。

详细了解ajax here。

Answer 3

你应该异步进行。首先，使用标记围绕要发布的数据：

<form>
...
</form>

关于表单的教程： https://www.w3schools.com/html/html_forms.asp

要异步发布表单，可以使用jquery或js。简单快捷的方法是jquery。这是文档的链接： https://api.jquery.com/jquery.post/

在jquery post doc页面的页面末尾有一个例子，它解释了如何使用它，并且基本上做了你想要的事情。

没有刷新页面的发布按钮

3 个答案: