After a large half-day efforts, finally completed the increase and deletion check! The mood is a bit small excitement!! For beginners of me, all along the journey is confused, Pit!! Although there is information on the Internet, it is not easy to get started (beginner's Me). (Bitter force Ah!) ）
WebService page:
<summary>///Tsetweb Summary description///</summary> [WebService (Namespace = "http://tempuri.org/")] [We Bservicebinding (ConformsTo = wsiprofiles.basicprofile1_1)] [System.ComponentModel.ToolboxItem (false)]//To allow ASP to be used. NET AJAX calls this Web service from the script, uncomment the following line. [System.Web.Script.Services.ScriptService] public class TsetWeb:System.Web.Services.WebService {TESTBLL bl L = new TESTBLL (); [WebMethod (Description = "Get all object Information")] public string Alluserjson () {return ToJson (BLL. Getalluser ()); } [WebMethod (Description = "Add an object Information")] public string Setuserjson (string name, String phone) { Return ToJson (BLL. Setadduser (Name,phone)); } [WebMethod (Description = "Delete an object information")] public string deluserjson (int id) {return ToJson ( Bll. Deluser (ID)); } [WebMethod (Description = "Change an object Information")] public string Update (int id, string name, String phone) {Test user = new Test (); User.ID = ID; User.Name = name; User.phone = phone; Return ToJson (BLL. Update (user)); }//For data serialization, return JSON format public string ToJson (object obj) {JavaScriptSerializer serializer = New JavaScriptSerializer (); Return serializer. Serialize (obj); } }
Ajax Call WebService page:
<body> <form id= "Form1" runat= "Server" > <div> <table id= "tab" > <tr> <td> number </td> <td> name </td> <td> phone </td> <th> operations </th> </tr> </table> </div> <input type= "Butt On "name=" Add "id=" Add "value=" adding "/> </form> <script src=" Scripts/jquery-1.7.1.min.js "></SCRIPT&G T <script> $ (function () {$.ajax ({url: "/tsetweb.asmx/alluserjson", C Ontenttype: ' Application/json ', DataType: ' JSON ', type: ' Post ', Success:func tion (data) {var a = eval ("(" + DATA.D + ")"); Background return is a string, so convert to JSON object $.each (A, function (index, item) {var tr = $ ("<tr/> "); $ ("<td/>"). HTML (item["id"]). AppendTo (TR); $ ("<td/>"). HTML (item["name"]). AppendTo (TR); $ ("<td/>"). HTML (item["Phone"]). AppendTo (TR); $ ("<button id = ' d ' onclick= ' del (" + item["id"] + ") ' > '). html (" delete "). AppendTo (TR); $ ("<button id = ' u ' onclick= ' Updata (" + item["id"] + ") ' > '). html (" Update "). AppendTo (TR); Tr.appendto ("#tab"); }); }, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {alert (XMLHttpRequest + "," + Textstatus + "," + Errorthrown); } }); }); $ ("#add"). Click (function () {$.ajax ({url: "/tsetweb.asmx/setuserjson", data: "{n Ame: ' Li Liu ', Phone: ' 13727713819 '}, ContentType: ' Application/json ', DataType: ' JSON ', Type: "Post", success:function (data) {var a = eval ("("+ DATA.D +") "); Background return is a string, so convert to JSON object alert (a);//return 1 for Success}, Error:function (xmlhttprequ EST, 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 + ")"); Background return is a string, so convert to JSON object alert (a);//return 1 for Success}, Error:function (xmlhttprequ EST, textstatus, Errorthrown) {alert (XMLHttpRequest + "," + Textstatus + "," + Errorthrown "); } }); } function Updata (ID) {$.ajax ({url: "/tsetweb.asmx/update", type: "Post" , DaTA: {"id": ID, "name": ' 99 ', "Phone": ' 15927713819 '}, DataType: "JSON", success:function (data) {var a = eval ("(" + DATA.D + ")"); Background return is a string, so convert to JSON object alert (a);//return 1 for Success}, Error:function (xmlhttprequ EST, textstatus, Errorthrown) {alert (XMLHttpRequest + "," + Textstatus + "," + Errorthrown "); } }); } </script></body>
Ajax Call WebService Results:
Webapi page:
public class Valuescontroller:apicontroller { testbll BLL = new Testbll (); GET Api/values/getall () [httpget] public list<test> GetAll () { return BLL. Getalluser (); } [HttpPost] public int postnew ([frombody]test user) { return BLL. Setadduser (User.Name, User.phone); } [HttpPost] public int Postnew (string name, String phone) { return BLL. Setadduser (name, phone); } [Httpdelete] public int Delete ([frombody]test user) { return BLL. Deluser (user.id); } [Httpput] public int Put ([frombody] Test user) { return BLL. Update (user); } }Ajax calls Webapi page:
<div> <table id= "tab" > <tr> <th> numbering </th> <th> name </th& Gt <th> phone </th> <th> actions </th> </tr> </table> <input type= "button" Name= "Add" id= "Add" value= "adding"/></div><script src= "~/scripts/jquery-1.7.1.min.js" ></script> <script> $ (function () {$.ajax ({url: "Api/values/getall", type: "GET", DataType: "JSON", success:function (data) {$.each (data, function (index, item) { var tr = $ ("<tr/>"); $ ("<td/>"). HTML (item["id"]). AppendTo (TR); $ ("<td/>"). HTML (item["name"]). AppendTo (TR); $ ("<td/>"). HTML (item["Phone"]). AppendTo (TR); $ ("<button id = ' d ' onclick= ' del (" + item["id"] + ") ' > '). html (" delete "). AppendTo (TR); $ ("<bUtton id = ' u ' onclick= ' Updata ("+ item[" id "] +") ' > '). html ("Update"). AppendTo (TR); Tr.appendto ("#tab"); }); }, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {alert (XMLHttpRequest + "," + Tex Tstatus + "," + Errorthrown); } }); }); $ ("#add"). Click (function () {$.ajax ({url: "Api/values/put", type: "Put", dat A: {"id": ID, "name": ' Zhao Qi ', "Phone": ' 15727713819 '}, DataType: "JSON", success:function (data) { alert (data);//returns 1 for Success}, 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);//return 1 means success}, Error:function (XM Lhttprequest, Textstatus, Errorthrown) {alert (XMLHttpRequest + "," + Textstatus + "," + Errorthrown "); } }); } function Updata (ID) {$.ajax ({url: "Api/values/put", type: "Put", Data: {"id": ID, "name": ' Yellow Eight ', "Phone": ' 15927713819 '}, DataType: "JSON", success:function (data) { alert (data);//return 1 = success}, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {Alert (XMLHttpRequest + "," + Textstatus + "," + Errorthrown); } }); } </script>
Ajax Call WEBAPI Results:
PS: Although the pit along the way, in retrospect is also good, this process!! It's too much!! (For the first time note.) ）
AJAX calls WebService, WebApi additions and deletions (notes)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
