zoukankan html css js c++ java

webapi入门如何调用

1.建立html页面，头使用

<!DOCTYPE html>

2.建立放数据列表的容器

<ulid="products"/>

3.引jquery.js

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

4.写JS代码获取并绑定数据

完整代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Product App</title>
</head>
<body>

  <div>
    <h2>All Products</h2>
    <ul id="products" />
  </div>
  <div>
    <h2>Search by ID</h2>
    <input type="text" id="prodId" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
  </div>

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  <script>
    var uri = 'api/products';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });

    function formatItem(item) {
      return item.Name + ': $' + item.Price;
    }

    function find() {
      var id = $('#prodId').val();
      $.getJSON(uri + '/' + id)
          .done(function (data) {
            $('#product').text(formatItem(data));
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
          });
    }
  </script>
</body>
</html>

查看全文

相关阅读:
《CLR.via.C#第三版》第二部分第6，7章节读书笔记(三)
《CLR.via.C#第三版》第二部分第4，5章节读书笔记(二)
《CLR.via.C#第三版》第一部分读书笔记(一)
https ssl
bower 代理
 哦？
Gulp 相关
 Edge浏览器的几个创意应用
 软件中英对照
 Windows 10 Mobile 演示：插入耳机自动执行 APP

原文地址：https://www.cnblogs.com/littleebeer/p/3442300.html

webapi入门 如何调用

webapi入门如何调用