我有一个表单，它接受日期选择器作为输入，并将该值发送到后端，并根据输入获得一些响应。响应数据将插入到一个表中。当表单被提交时，它应该在同一页面上显示表格。
HTML:<!DOCTYPE html>
<html>
<head>
<title>
Date Picker
</title>
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body>
<form method="POST">
Date: <input type="text" id="my_date_picker">
<button id="sbtn">Submit</button>
<div id="mytable">
<table id="datatable" style="display:none">
</table>
</div>
</form>
<script>
$(document).ready(function() {
$(function() {
$("#my_date_picker").datepicker();
});
})
</script>
</body>
</html>
JS :
$("#sbtn").click(function() {
if ($("#my_date_picker").val().length === 0){
alert('Invalid');
return false;
}else {
$("form").submit();
$("#datatable").show();
}
});
这里提交表单后我无法显示表格。表单提交后，是否有办法在同一页上显示表格?
谢谢。
如果你从页面加载中获取数据你可以在ajax提交后使用location.reload()这将重新加载当前页面或者你可以从ajax响应中附加数据像这样$('#datatable').append(data);
document.getElementById("button").addEventListener("click", () => {
const val = document.getElementById("data").value
fetch('//url/to/post/the/data', {
method: 'POST',
headers: {
// if any
},
body: JSON.stringify({
data: val
// or other data
})
})
.then(res => res.json())
.then(res => {
// response from the backend
// assuming the data will be array and that has to be displayed as table, something like this,
// res = {
// data: [{name: 'Nikhil', age: '22'}, {name: 'Hello', age: '29'}]
// }
const arr = res.data
// setting the headers
let content = '<table><tr><th>Name</th><th>Age</th></tr>';
// setting the rows of the table dynamically
arr.forEach((ele) => {
content += `<tr>`
content += `<td>${ele.name}</td>`
content += `<td>${ele.age}</td>`
content += `</tr>`
})
// closing the table tag
content += `</table>`
// inserting the html generated in the div with the id - result
document.getElementById('result').innerHTML = content;
})
.catch(err => {
// handle error here
})
})
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- // form fields and submit button -->
<input type="text" id="data">
<button id="button">Submit</button>
<!-- // table where data need to be displayed -->
<div id='result'></div>
</body>
</html>一种可能的解决方案是，您可以使用fetch或ajax从后端获取数据并将其显示为表，而无需刷新页面。
您可以在这里了解更多信息，
AJAX - https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
取回- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
编辑:添加代码，并解释如何在DOM中以表的形式添加数据。
PS:这是如何将数据添加为表的可能解决方案之一，其他解决方案包括使用JS方法(如createTextNode()等)创建DOM。
/* you can use below code */
step 1: display date out of form
step 2: get data in $_POST
if(isset($_POST)){
/* retrieve data here & display it */
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script>
function showData() {
document.getElementById('displaydata').innerHTML =
document.getElementById("txtInput").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter Input</b></label>
<input type="text" name="message" id="txtInput">
</form>
<input type="submit" onclick="showData();"><br/>
<label>Your input: </label>
<p><span id='displaydata'></span></p>
</body>
</html>enter code here
要重新呈现页面，您可以使用window.location.href = window.location.href。但是，由于您将表显示设置为none，因此还必须在那里保留条件检查。
如果你使用ajax，那么
$("form").submit(function (event) {
event.preventDefault();
var form = $(this)
url = form.attr('action')
var data = $("#my_date_picker").val()
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
beforeSend: function () {
},
success: function (data) {
$('#datatable').append(`<tr>
<td>data</td>
</tr>`);
$("#datatable").show();
}
})
});