• 如何在AJAX应用中访问ADO.NET Data Service(续)——基于jquery框架


    上一篇演示了如何基于Microsoft ASP.NET AJAX框架实现对ADO.NET Data Service的调用(增删改查)。下面的例子则是直接基于jquery框架的

    需要注意的是,凡是要发送给服务的数据,contentType必须设置为application/json,而且要设置data的时候,要转换为json字符串。

    在接收数据的时候,dataType要设置为json,也就是说服务会直接返回json数据给客户端,这样操作就方便多了。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    
        <script src="json2.js" type="text/javascript"></script>
    
        <script type="text/javascript" language="javascript">
    
            $(function() {
                $("#query").click(function() {
                    //发起一个异步查询
    
                    $.ajax({
                        type: "GET",
                        url: "NorthwindService.svc/Customers",
                        dataType: "json",
                        success: function(result) {
                            var result = result.d;
                            for (ind in result) {
                                var customer = result[ind];
                                $("<li>" + customer.CustomerID + "," + customer.CompanyName + "</li>").appendTo("#result");
                            }
                        }
                    });
                });
    
    
                $("#insert").click(function() {
                    //插入一个新的客户
    
                    var customer = {
                        CustomerID: "ABCDE",
                        CompanyName: "Thinker Inc"
                    };
    
                    $.ajax({
                        type: "POST",
                        url: "NorthwindService.svc/Customers",
                        contentType: "application/json",
                        data: JSON.stringify(customer),
                        success: function(result) {
                            alert("操作成功");
                        }
                    });
                });
    
    
    
                $("#update").click(function() {
                    //更新一个客户
    
                    var customer = null;
    
                    $.ajax({
                        type: "GET",
                        url: "NorthwindService.svc/Customers('ABCDE')",
                        dataType: "json",
                        async: false,
                        success: function(result) {
                            customer = result.d;
                        }
                    });
    
                    alert(customer.CompanyName);
                    customer.CompanyName = "New Company";
    
                    $.ajax({
                        type: "PUT",//这里还可以使用MERGE指令,效果是一样的
                        url: "NorthwindService.svc/Customers('ABCDE')",
                        contentType: "application/json",
                        data: JSON.stringify(customer),
                        success: function(result) {
                            alert("操作成功");
                        }
                    });
    
                });
    
    
                $("#delete").click(function() {
                    //删除一个客户
                    $.ajax({
                        type: "DELETE",
                        url: "NorthwindService.svc/Customers('ABCDE')",
                        success: function(result) {
                            alert("操作成功");
                        }
                    });
                });
    
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input type="button" value="查询" id="query" />
            <input type="button" value="插入" id="insert" />
            <input type="button" value="更新" id="update" />
            <input type="button" value="删除" id="delete" />
        </div>
        <ol id="result">
        </ol>
        </form>
    </body>
    </html>
    
    image 
  • 相关阅读:
    Java操作Redis的方式
    Redis综述
    KafKa综述
    NuxtJS项目——状态树
    NuxtJS项目——开发工具
    NuxtJS项目——命令和部署
    NuxtJS项目——模块
    NuxtJS项目——插件
    NuxtJS项目——资源文件
    Sampling Matrix
  • 原文地址:https://www.cnblogs.com/chenxizhang/p/1675305.html
Copyright © 2020-2023  润新知