ajax+post+webapi,AJAX 调用WebService 、WebApi 增删改查（笔记）

经过大半天努力，终于完成增删改查了！心情有点小激动！！对于初学者的我来说，一路上都是迷茫，坑！！虽说网上有资料，可动手起来却不易(初学者的我)。(苦逼啊！)

WebService 页面：

///

///TsetWeb 的摘要说明///

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。

[System.Web.Script.Services.ScriptService]public classTsetWeb : System.Web.Services.WebService

{

TestBll bll= newTestBll();

[WebMethod(Description= "获取所有对象信息")]public stringAllUserJson()

{returnToJson(bll.GetAllUser());

}

[WebMethod(Description= "添加一个对象信息")]public string SetUserJson(string name ,stringphone)

{returnToJson(bll.SetAddUser(name,phone));

}

[WebMethod(Description= "删除一个对象信息")]public string DelUserJson(intid)

{returnToJson(bll.DelUser(id));

}

[WebMethod(Description= "更改一个对象信息")]public string Update(int id, string name, stringphone)

{

Test user= newTest();

user.id=id;

user.name=name;

user.phone=phone;returnToJson(bll.Update(user));

}//对数据序列化，返回JSON格式

public string ToJson(objectobj)

{

JavaScriptSerializer serializer= newJavaScriptSerializer();returnserializer.Serialize(obj);

}

}

AJAX调用WebService 页面：

编号	名字	电话	操作

$(function() {

$.ajax({

url: "/TsetWeb.asmx/AllUserJson",

contentType: 'application/json',

dataType: "json",

type: "post",

success: function(data) {

var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象

$.each(a, function(index, item) {

var tr = $("

");

$("

").html(item["id"]).appendTo(tr);

$("

").html(item["name"]).appendTo(tr);

$("

").html(item["phone"]).appendTo(tr);

$("").html("删除").appendTo(tr);

$("").html("更新").appendTo(tr);

tr.appendTo("#tab");

});

},

error: function(XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);

}

});

});

$("#add").click(function() {

$.ajax({

url: "/TsetWeb.asmx/SetUserJson",

data: "{name:'李六',phone:'13727713819'}",

contentType: 'application/json',

dataType: "json",

type: "post",

success: function (data) {

var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象

alert(a);//返回1表示成功

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);

}

});

});

function del(id) {

$.ajax({

url: "/TsetWeb.asmx/DelUserJson",

type: "Post",

data: { "id": id },

dataType: "json",

success: function (data) {

var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象

alert(a);//返回1表示成功

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);

}

});

}

function updata(id) {

$.ajax({

url: "/TsetWeb.asmx/Update",

type: "Post",

data: { "id": id, "name": '九九', "phone": '15927713819' },

dataType: "json",

success: function (data) {

var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象

alert(a);//返回1表示成功

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);

}

});

}

WebApi页面：

public classValuesController : ApiController

{

TestBll bll= newTestBll();//GET api/values/GetAll()

[HttpGet]public ListGetAll()

{returnbll.GetAllUser();

}

[HttpPost]public intPostNew([FromBody]Test user)

{returnbll.SetAddUser(user.name, user.phone);

}

[HttpPost]public int PostNew(string name ,stringphone)

{returnbll.SetAddUser(name, phone);

}

[HttpDelete]public intDelete([FromBody]Test user)

{returnbll.DelUser(user.id);

}

[HttpPut]public intPut([FromBody] Test user)

{returnbll.Update(user);

}

}

AJAX调用WebApi页面：

编号	名字	电话	操作

$(function() {

$.ajax({

url:"api/Values/GetAll",

type:"GET",

dataType:"json",

success: function(data) {

$.each(data, function(index, item) {var tr = $("

");

$("

").html(item["id"]).appendTo(tr);

$("

").html(item["name"]).appendTo(tr);

$("

").html(item["phone"]).appendTo(tr);

$("").html("删除").appendTo(tr);

$("").html("更新").appendTo(tr);

tr.appendTo("#tab");

});

},

error: function(XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest+ "," + textStatus + "," +errorThrown);

}

});

});

$("#add").click(function () {

$.ajax({

url:"api/Values/Put",

type:"Put",

data: {"id":id, "name":'赵七',"phone":'15727713819'},

dataType:"json",

success: function (data) {

alert(data);//返回1表示成功

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest+ "," + textStatus + "," +errorThrown);

}

});

});

function del(id) {

$.ajax({

url:"api/Values/Delete",

type:"Delete",

data: {"id": id },

dataType:"json",

success: function (data) {

alert(data);//返回1表示成功

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest+ "," + textStatus + "," +errorThrown);

}

});

}

function updata(id) {

$.ajax({

url:"api/Values/Put",

type:"Put",

data: {"id": id, "name": '黄八', "phone": '15927713819'},

dataType:"json",

success: function (data) {

alert(data);//返回1表示成功

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest+ "," + textStatus + "," +errorThrown);

}

});

}