AJAX实现数据的增删改查操作详解【java后台】（ajax删除后刷新页面）奔走相告

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<script src=”http://libs.baidu.com/jquery/2.1.4/jquery.min.js”></script>
</head>
<body>
编号：<input type=”text” value=”” id=”pno”/><br>
姓名：<input type=”text” value=”” id=”name”/><br>
性别：男：<input type=”radio” name=”sex” value=”男”>女：<input type=”radio” name=”sex” value=”女”><br>
年龄：<select id=”age”>
<option value=”15″>15</option>
<option value=”16″>16</option>
<option value=”17″>17</option>
<option value=”18″>18</option>
<option value=”19″>19</option>
<option value=”20″>20</option>
<option value=”21″>21</option>
<option value=”22″>22</option>
<option value=”23″>23</option>
<option value=”24″>24</option>
<option value=”25″>25</option>
</select><br>
身高：<input type=”text” value=”” id=”height”/><br>
体重：<input type=”text” value=”” id=”weight”/><br>
<input type=”button” value=”插入” id=”btn_1″ onclick=”submit()”/>
<br>
<br>
<br>

编号：<input type=”text” value=”” id=”pno_query”/>
<input type=”button” value=”查询” id=”btn_2″ onclick=”query()”/>
<table id=”queryResult”>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>身高</td>
<td>体重</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

</body>

function submit() {
var pno=$(“#pno”).val();
var name=$(“#name”).val();
var sex=$(‘input[name=”sex”]:checked’).val();
var age=$(“#age”).val();
var height=$(“#height”).val();
var weight=$(“#weight”).val();

var data={

“pno”:pno,
“name”:name,
“sex”:sex,
“age”:age,
“height”:height,
“weight” : weight
}

$.ajax({
type : “post”,
url : “Hello”,
data : data,
cache : true,
async : true,
success: function (data ,textStatus, jqXHR){
if(data.code==200){
alert(“插入成功了”);
}else{
alert(data.message);
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {

alert(typeof(errorThrown));
}

});
}

function query() {

},
error:function (XMLHttpRequest, textStatus, errorThrown) {

alert(typeof(errorThrown));
}

});
}

function del() {
var pno=$(“#pno_del”).val();

$.ajax({
type : “post”,
url : “HelloDelete”,
data : {
“pno”: pno
},
cache : true,
async : true,
success: function (data ,textStatus, jqXHR){
if(data.code==200){
alert(“删除成功了”);
}else{
alert(data.message);
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {

alert(typeof(errorThrown));
}

});
}

function update() {
var pno=$(“#pno_up”).val();
var name=$(“#name_up”).val();
var sex=$(‘input[name=”sex_up”]:checked’).val();
var age=$(“#age_up”).val();
var height=$(“#height_up”).val();
var weight=$(“#weight_up”).val();

var data={

“pno”:pno,
“name”:name,
“sex”:sex,
“age”:age,
“height”:height,
“weight” : weight
}

$.ajax({
type : “post”,
url : “HelloUpdate”,
data : data,
cache : true,
async : true,
success: function (data ,textStatus, jqXHR){
if(data.code==200){
alert(“更新成功了”);
}else{
alert(data.message);
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {

alert(typeof(errorThrown));
}

});
}

</script>
</html>