我有一个带有文本区域字段的表单，我已经将数据存储在表中，但现在我想使用ajax动态在同一页面中显示结果，这意味着我想刷新页面而不重新加载
<form action='' method='post''>
<div class="form-group">
<label for="comment"></label>
<textarea class="form-control" rows="5" id="comment" name='message_content' required></textarea>
</div>
<button type='submit' class='btn btn-default' name='send_msg'>
send</button>
</form>最佳答案
我并不是使用 javascript 框架的强烈拥护者，但是，如果没有它，ajax 处理起来会很痛苦，所以这里是一个使用 JQuery 的示例，但可以使用任何其他框架做或多或少相同的事情。
第一步是拦截提交事件，然后获取表单数据，执行ajax查询并将结果显示在div中。
<!DOCTYPE doctype html>
<html>
<head>
</head>
<script src="jquery-3.1.0.min.js">
</script>
<script>
jQuery( document ).ready(function() {
jQuery('#myForm').submit(function(e){
e.preventDefault();
jQuery.ajax({
url: e.currentTarget.action,
data:{
comment: jQuery('#comment').val()
}
}).done(function(data){
console.log(data);
jQuery('#display-data').append(data);
});
});
});
</script>
<body>
<form id="myForm" action="getData.php" method="post">
<div class="form-group">
<label for="comment">
</label>
<textarea class="form-control" id="comment" name="message_content" required="" rows="5">
</textarea>
</div>
<button class="btn btn-default" name="send_msg" type="submit">
send
</button>
</form>
<div id="display-data"></div>
</body>
</html>
编辑:从您的评论中，我了解到您想在提交后重新加载页面，您可以在ajax查询结束后执行此操作:
jQuery('#myForm').submit(function(e){
e.preventDefault();
jQuery.ajax({
url: e.currentTarget.action,
data:{
comment: jQuery('#comment').val()
}
}).done(function(data){
document.location.reload();
});
});
关于javascript - 如何发送表单数据并在同一页面中使用ajax动态显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38826127/