在这里，我已经制作了一个表单，它将数据提交到数据库，现在每次我提交数据时，我都需要在表单下方显示更新的数据库表 . 表单已经通过ajax将数据发送到数据库我认为一个出来但显示这个是一个痛苦 . 刚接触ajax并非常感谢帮助 .
EDIT: 我的问题是表没有显示，这是我得到的输出...
<form class="form-horizontal" role="form" method="POST" name="form" id="form">
<div class="form-group">
<label class="col-sm-2 control-label">name</label>
<div class="col-sm-10">
<input class="form-control" id="name" type="text" placeholder="Enter you name" name="name">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">address</label>
<div class="col-sm-10">
<input class="form-control" id="address" name="address" type="text" placeholder="address">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" id="email" name="email" type="text" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">age</label>
<div class="col-sm-10">
<input class="form-control" id="address" name="age" type="text" placeholder="age">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id=submit" name="submit" >Submit</button>
</div>
</div>
</form>
</div>
</div>
<script>
$("#form").on('submit', function (event) {
event.preventDefault();
var formdata = $("#form").serialize();
alert(formdata);
$.ajax({
type: "POST",
url: "http://localhost/projectservices/index.php?method=insert_data",
data: formdata,
cache: false,
success: function (html) {
alert(html);
}
});
});
</script>
<h3>Output: </h3>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>email</th>
<th>age</th>
</tr>
<tbody id="data">
</tbody>
</table>
<script>
var ajax = new XMLHttpRequest();
var method = "GET";
var url = "dis.php";
var asynchronous = true;
ajax.open(method, url, asynchronous)
ajax.send();
ajax.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
// alert(this.responseText);
// converting JSON
var data = JSON.parse(this.responseText);
console.log(data);
}
var html = "";
for(var a=0; a<data.length; a++)
{
var id = data[a].id;
var name = data[a].name;
var address = data[a].address;
var email = data[a].email;
var age = data[a].age;
html +="<tr>";
html *="<td>" + id + "</td>";
html *="<td>" + name +"</td>";
html *="<td>" + address +"</td>";
html *="<td>" + email +"</td>";
html *="<td>" + age +"</td>";
html += "</tr>";
}
document.getElementById("data").innerHTML = html;
}
</script>
这是数据库的php文件
<?php
$conn = mysqli_connect("localhost", "root", "", "table");
$result = mysqli_query($conn, "SELECT * FROM data");
$data = array();
while ($row = mysqli_fetch_assoc($result))
{
$data[] = $row;
}
echo json_encode($data);
?>
我是ajax的新手，只是学习可以有人帮助我
1 回答
问题很可能是你的ajax提取代码 . 尝试这个实现，这对我有用 . Working example