php ajax实现增删改查,###实现ajax的增删改查案例（jquery)

首先先增加开始,先上静态页面

学号：

姓名：

性别：男：女：

name="sex" value="女">

年龄：

15

16

17

18

点击添加按钮调用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.到此增加部分就完成了，接下来是查询部分,话不多说直接上代码：

学号：

学号	姓名	性别	年龄

点击查询按钮调用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:

//根据学号删除

学号：

点击删除按钮调用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.终于要结束了，最后一个修改功能了，直接上代码：

学号：

姓名：

性别：男：女：

年龄：

15

16

17

18

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('出错了');

}

});

}

最后附上截图：

image.png

到此就结束了。喜欢给些关注啊。以后会经常更新！