<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>简单留言板</title>
</head>
<body>
<table border=”2″ width=”500″ align=”center”>
<tr>
<td>留言内容:</td>
<td>
<textarea id=”content” name=”content”></textarea>
</td>
</tr>
<tr>
<td>留言人:</td>
<td>
<select id=”author” name=”author”>
<option value=”唐僧”>唐僧</option>
<option value=”八戒”>八戒</option>
<option value=”沙僧”>沙僧</option>
<option value=”孙悟空”>孙悟空</option>
</select>
</td>
</tr>
<tr>
<td><input type=”button” value=”留言” οnclick=”insert()”></td>
</tr>
</table>
<hr><br>
<div id=”list”></div>
</body>
<script type=”text/javascript”>
function insert(){
//取出输入内容
var content=document.getElementById(‘content’).value;
var author=document.getElementById(‘author’).value;
//ajax应用
var xhr=new XMLHttpRequest();
xhr.open(‘get’,”insert.php?content=”+content+”&author=”+author);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
if(xhr.responseText){
//追加显示响应的最新数据内容
document.getElementById(‘list’).innerHTML=xhr.responseText;
}else{
alert(“添加失败!”);
}
}
}
}
</script>
</html>
原文链接:https://blog.csdn.net/living_ren/article/details/78868243
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
评论前必须登录!
立即登录