zoukankan      html  css  js  c++  java
  • 如何在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 
  • 相关阅读:
    yolo_to_onnx ValueError: need more tan 1 value to unpack
    yolo_to_onnx killed
    C++ 实现二维矩阵的加减乘等运算
    Leetcode 1013. Partition Array Into Three Parts With Equal Sum
    Leetcode 1014. Best Sightseeing Pair
    Leetcode 121. Best Time to Buy and Sell Stock
    Leetcode 219. Contains Duplicate II
    Leetcode 890. Find and Replace Pattern
    Leetcode 965. Univalued Binary Tree
    Leetcode 700. Search in a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/chenxizhang/p/1675305.html
Copyright © 2011-2022 走看看