WebService 页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/// <summary>
    /// TsetWeb 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
    [System.Web.Script.Services.ScriptService]
    public class TsetWeb : System.Web.Services.WebService
    {
        TestBll bll = new TestBll();
 
        [WebMethod(Description = "获取所有对象信息")]
        public string AllUserJson()
        {
            return ToJson(bll.GetAllUser());
        }
 
        [WebMethod(Description = "添加一个对象信息")]
        public string SetUserJson(string name ,string phone)
        {
            return ToJson(bll.SetAddUser(name,phone));
        }
        [WebMethod(Description = "删除一个对象信息")]
        public string DelUserJson(int id)
        {
            return ToJson(bll.DelUser(id));
        }
        [WebMethod(Description = "更改一个对象信息")]
        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));
        }
 
        //对数据序列化，返回JSON格式
        public string ToJson(object obj)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(obj);
        }
    }

　　AJAX调用WebService 页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tab">
            <tr>
                <td>编号</td>
                <td>名字</td>
                <td>电话</td>
                <th>操作</th>
            </tr>
        </table>
    </div>
        <input type="button" name="add" id="add" value="添加" />
    </form>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(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 = $("<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("删除").appendTo(tr);
                        $("<button id ='u' onclick='updata(" + item["id"] + ")'>").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);
                }
            });
        }
    </script>
</body>

　　AJAX调用WebService结果：

WebApi页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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调用WebApi页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<div>
    <table id="tab">
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>
    <input type="button" name="add" id="add" value="添加" />
</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("删除").appendTo(tr);
                     $("<button id ='u' onclick='updata(" + item["id"] + ")'>").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);
             }
         });
     }
    </script>

　　AJAX调用WebApi结果：

AJAX 调用WebService 、WebApi 增删改查的更多相关文章

  1. jQuery调用WebService实现增删改查的实现

    第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...

  2. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  3. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查

    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...

  4. C#利用WinForm调用WebServices实现增删改查

    实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...

  5. AJAX 调用WebService 、WebApi 增删改查（笔记）

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

  6. ASP.NET WebApi 增删改查

    本篇是接着上一篇<ASP.NET WebApi 入门>来介绍的. 前言 习惯说 CRUD操作,它的意思是"创建. 读取. 更新和删除"四个基本的数据库操作.许多 HTT ...

  7. WebApi增删改查Demo

    1.新建webapi项目 2.配置WebApiConfig public const string DEFAULT_ROUTE_NAME = "MyDefaultRoute"; p ...

  8. ajax——优化0126（增删改查：添加查看详情，返回结果类型为JSON型，在窗口显示）

    效果: 鼠标点击查看详情时 数据库: 0126.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. 关于MVC工厂模式的增删改查sql存储过程

    这里MVC中用到了反射,工厂,泛型,接口 在搭建框架的时候,除了MVC的三层以外,还有泛型的接口层和工厂层 下面是dal层调用sql存储过程,增删改查,dal层继承了接口层,实现了接口层里面的方法 1 ...

随机推荐

  1. Jenkins入门【转】

    一.Jenkins概述 二.安装Jenkins https://pkg.jenkins.io/redhat-stable/ sudo wget -O /etc/yum.repos.d/jenkins. ...

  2. ActiveMQ参数异常 “Invalid broker URI”

    某次启动项目报错,提示ActiveMQ参数异常 该参数的值配置如下 跟踪读取配置的代码如下,可以看到读取我配置的key为xmq.actmq.connection.url.forSend的对应值,赋值到 ...

  3. 京东 PC 首页 2019 改版前端总结 原创： 何Jason,EC,小屁 凹凸实验室 今天

    京东 PC 首页 2019 改版前端总结 原创: 何Jason,EC,小屁 凹凸实验室 今天

  4. Eclipse 的快捷键以及文档注释、多行注释的快捷键 一、多行注释快捷键

    一.多行注释快捷键 1.选中你要加注释的区域,用ctrl+shift+C 或者ctrl+/ 会加上//注释2.先把你要注释的东西选中,用shit+ctrl+/ 会加上/*    */注释 3.以上快捷 ...

  5. Git - 高级合并

    Git - 高级合并https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E9%AB%98%E7%BA%A7%E5%90%88%E5%B9%B6 ...

  6. ubuntu下安装ftp服务

    1. 安装vsftpd $ sudo apt-get install vsftpd 2. 创建一个用户user-ftp用于ftp服务 $ sudo adduser user-ftp 3.创建一个文件/ ...

  7. flutter手势

    import 'package:flutter/material.dart'; import 'package:flutter_app/pages/dismissed_page.dart'; clas ...

  8. shell编程系列1--shell脚本中的变量替换

    shell编程系列1--shell脚本中的变量替换 变量替换总结: .${变量#匹配规则} # 从头开始匹配,最短删除 .${变量##匹配规则} # 从头开始匹配,最长删除(贪婪模式) .${变量%匹 ...

  9. UniPush使用指南

    原贴:https://ask.dcloud.net.cn/article/35622 UniPush使用指南 分类:uni-app Push unipush 从HBuilderX 1.7.2起,uni ...

  10. WPF ContextMenu DataTemplate MenuItem Visibility 问题

    问题: ContextMenu 的 DataTemplate 中 MenuItem 设置 Visibility 不起作用 需要添加一下样式才可以: <ContextMenu.ItemContai ...