- 首先先增加开始,先上静态页面
学号：<input type="text" value="" id="userid"/><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>
</select><br>
<input type="button" value="添加" id="btn_1" onclick="add()"/>
<br>
点击添加按钮调用add方法发送一个ajax请求如下：
function add() {
var userid = $("#userid").val();
var name = $("#name").val();
var sex = $('input[name="sex"]:checked').val();
var age = $("#age").val();
var data={
"userid":userid,
"name":name,
"sex":sex,
"age":age
}
$.ajax({
type : "post",
url : "demo",//这是你要请求的接口网址，之后所有接口都是随便写的接口
data : data,//传输的数据，当然传输的数据也可以在url链接后面打个问号传
cache : true, // 表示浏览器是否缓存被请求页面,默认是 true
async : true, // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajax里面的代码一起执行
dataType:"json", // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
success: function (data){
if(data.code == 200){
alert("插入成功了");
}else{
alert(data.message);
}
},
error:function () {
alert('出错了');
}
});
}
2.到此增加部分就完成了，接下来是查询部分,话不多说直接上代码：
学号：<input type="text" value="" id="userid_query"/>
<input type="button" value="查询" id="bt2" onclick="query()"/>
<table id="queryResult">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
点击查询按钮调用query方法发送一个ajax请求如下：
function query() {
var userid_query = $("#userid_query").val();
var str = ["学号","姓名","性别","年龄"];
$.ajax({
type : "post",
url : "demoQuery",
data : {
"userid_query": userid_query
},
cache : true,
async : true,
dataType:"json",
success: function (data){
//data = $.parseJSON(data);
var j = 0;
var x = 1;
for(var p in data){//遍历json对象的每个key/value对,p为key
console.log(data[p]);
if(j == 4) {
j = 0;
x++;
}
$("#queryResult tr:eq("+x+") td:eq("+j+")").html(data[p]);
console.log(data[p]);
j++;
}
},
error:function () {
alert('出错了');
}
});
}
3.接下来是我们的删除部分了，let,go:
//根据学号删除
学号：<input type="text" value="" id="userid_del"/>
<input type="button" value="删除" id="bt3" onclick="del()"/>
<br>
点击删除按钮调用del方法发送一个ajax请求如下：
function del() {
var userid = $("#userid_del").val();
$.ajax({
type : "post",
url : "demoDelete",
data : {
"userid":userid
},
cache : true,
async : true,
dataType:"json",
success: function (data){
if(data.code == 200){
alert("删除成功了");
}else{
alert(data.message);
}
},
error:function () {
alert('出错了’);
}
});
}
4.终于要结束了，最后一个修改功能了，直接上代码：
学号：<input type="text" value="" id="userid_alter"/><br>
姓名：<input type="text" value="" id="name_alter"/><br>
性别：男：<input type="radio" name="sex_alter" value="男">女：<input type="radio" name="sex_alter" value="女"><br>
年龄：<select id="age_alter">
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select><br>
<input type="button" value="修改" id="bt4" onclick="alter()"/>
<script>
function alter() {
var userid = $("#userid_alter").val();
var name = $("#name_alter").val();
var sex = $('input[name="sex_alter"]:checked').val();
var age = $("#age_alter").val();
var data={
"userid":userid,
"name":name,
"sex":sex,
"age":age
}
$.ajax({
type : "post",
url : "demoAlter",
data : data,
cache : true,
async : true,
dataType:"json",
success: function (data){
if(data.code == 200){
alert("修改成功了");
}else{
alert(data.message);
}
},
error:function () {
alert('出错了');
}
});
}
</script>
最后附上截图：
image.png
到此就结束了。喜欢给些关注啊。以后会经常更新！
网友评论