前端访问WebApi

1 本篇概述

  前一篇文章重点介绍了Controller的一些知识，本篇重点介绍如何通过HTML端来调用这些后台API。

2 准备工作

2.1 引入js包

  前面介绍过前端的js包，需要通过Bower工具进行管理，这里我们添加三个js的包： - jQuery - jquery-form - bootstrap

2.2 添加静态文件支持

  所有静态页面存放在wwwroot文件夹下面，默认是不能访问的，需要在Configure方法内要增加下面语句：app.UseStaticFiles();

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    //启用Mvc服务
    app.UseMvcWithDefaultRoute();
    app.UseStaticFiles();
}

3 开工

  先建两个实体类

public class Product
{
    public string Code
    {
        get;
        set;
    }
    public string Name
    {
        get;
        set;
    }
    public int Numbers
    {
        get;
        set;
    }
    public User user
    {
        get;
        set;
    }
    public Product()
    {
        user = new User();
    }
}
public class User
{
    public string Name
    {
        get;
        set;
    }
    public int Age
    {
        get;
        set;
    }
}
3.1 通过json格式

  后台服务代码:

[Produces("application/json")]
[Route("api/products")]
public class ProductsController: Controller
{
    [HttpPost]
    public string AddProduct(String Code, [FromBody] Product product)
    {
        Console.WriteLine($ "Code :{Code}");
        Console.WriteLine($ "product code :{product.Code}");
        Console.WriteLine($ "product name :{product.Name}");　　　　　　　
        Console.WriteLine($ " product.user.Name :{product.user.Name}");
        return "success";
    }
}

  前端调用代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Using Bootstrap</title>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/jquery-form/dist/jquery.form.min.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            $("#add1").click(function (event) {
                var datastr = "{ 'Code': '2222', 'Name': '33333','Numbers': 0,'user':{'Name':'username'}}";
                $.ajax({
                    type: "POST",
                    url: "api/products",
                    contentType: "application/json;charset=UTF-8",
                    data: datastr,
                    success: function (result) {
                        alert("success");
                    },
                    error: function (error) {
                        alert("出错：" + error.responseText);
                    }
                });
            });  
        });
    </script>
</head>
<body>     
        <div> 
            <button type="button" class="btn btn-success" id="add1">ADD1</button><br /><br />            
        </div> 
</body>
</html>

  其中datastr是一个json字符串。

注意：第一个参数Code是没有办法取到值的，只有FromBody标记的参数才能取到值，Code可以通过URL传过来，或者封装到类里，比如更新product的操作，主键可以通过product.Code获得，而不是单独传过来。

  通过Chrome的开发者工具DevTools，我们可以跟踪一下提交的数据信息：

  head信息：

Content-Type: application/json;charset=UTF-8　　

  POST的数据:

{ 'Code': '2222', 'Name': '33333','Numbers': 0,'user':{'Name':'username'}}
3.2 普通表单的提交

  服务端代码：

[Produces("application/json")]
[Route("api/products")]
public class ProductsController: Controller
{
    [HttpPost]
    public string AddProduct(String Code, Product product)
    {
        Console.WriteLine($ "Code :{Code}");
        Console.WriteLine($ " product code :{product.Code}");
        Console.WriteLine($ " product name :{product.Name}");
        Console.WriteLine($ " product.user.Name :{product.user.Name}");
        return "success";
    }
}

  服务端代码和上面基本一样，去掉了FromBody标签。

  前端调用代码：

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <title>
            Using Bootstrap
        </title>
        <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
        <script src="lib/jquery/dist/jquery.js">
        </script>
        <script src="lib/jquery-form/dist/jquery.form.min.js">
        </script>
        <script src="lib/bootstrap/dist/js/bootstrap.js">
        </script>
        <script>
            $(document).ready(function() {
                $("#add3").click(function(event) {
                    $("#myform").ajaxSubmit();
                });
            });
        </script>
    </head>

    <body>
        <form id="myform" action="api/products" method="post">
            <div>
                Code:
                <input type="text" id="Code" name="Code" />
                <br />
                productCode:
                <input type="text" id="product.Code" name="product.Code" />
                <br />
                productName:
                <input type="text" id="product.Name" name="product.Name" />
                <br />
                UserName:
                <input type="text" id="product.user.Name" name="product.user.Name" />
                <br />
                <input type="submit" value="Submit" />
                <br />
                <br />
                <button type="button" class="btn btn-success" id="add3">
                    ADD3
                </button>
                <br />
                <br />
            </div>
        </form>
    </body>

</html>

  add3模拟了一个submit的操作，通过submit‘按钮提交数据或通过ADD3按钮提交数据，其效果一致。

  head信息:

Content-Type: application/x-www-form-urlencoded

  Post的数据：

Code=111&product.Code=www&product.Name=eeee&product.user.Name=4444

3.3 二进制格式文本

  后台代码和上面一致。

  前台代码:

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <title>
            Using Bootstrap
        </title>
        <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
        <script src="lib/jquery/dist/jquery.js">
        </script>
        <script src="lib/jquery-form/dist/jquery.form.min.js">
        </script>
        <script src="lib/bootstrap/dist/js/bootstrap.js">
        </script>
        <script>
            $(document).ready(function() {
                $("#add2").click(function(event) {

                    var datastr = new FormData();
                    datastr.append("Code", "111111");
                    datastr.append("product.Code", "3333");
                    datastr.append("product.Name", "4444");
                    datastr.append("product.user.Name", "555555");

                    $.ajax({
                        type: "POST",
                        url: "api/products",
                        contentType: false,
                        processData: false,
                        data: datastr,
                        success: function(result) {
                            alert(result);
                        },
                        error: function(error) {
                            alert("出错：" + error.responseText);
                        }
                    });
                });
            });
        </script>
    </head>

    <body>
        <form id="myform" action="api/products" method="post">
            <div>
                Code:
                <input type="text" id="Code" name="Code" />
                <br />
                productCode:
                <input type="text" id="product.Code" name="product.Code" />
                <br />
                productName:
                <input type="text" id="product.Name" name="product.Name" />
                <br />
                UserName:
                <input type="text" id="product.user.Name" name="product.user.Name" />
                <br />
                <button type="button" class="btn btn-success" id="add2">
                    ADD2
                </button>
                <br />
                <br />
            </div>
        </form>
    </body>

</html>

  此时前台构建了一个FormData的对象，并进行提交，属性的值应该从表单中进行读取。

  有一个更方便的方式可以填充FormData对象：

 var formdata = new FormData(document.getElementById("myform"));

  实际效果和上面代码一致。

  head信息:

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywjCGumOsjj4HdEQC

  Post的数据:

------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="Code"
111111
------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="product.Code"
3333
------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="product.Name"
4444
------WebKitFormBoundarywjCGumOsjj4HdEQC
Content-Disposition: form-data; name="product.user.Name"
555555
------WebKitFormBoundarywjCGumOsjj4HdEQC--

  由于 multipart/form-data类型可以传输非文本格式文件，可能包含特殊字符，不能简单通过&字符分割内容，所以定义了一个字符串来进行分割。

  如果需要上传文件，就必须采用这个方式。

版权声明： 本文为智客工坊「seabluescn」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

results matching ""

    No results matching ""

    更多教程 查看更多

    :springboot,jdbc 进入学习

    Spring Boot轻...

    4393 44

    :api,swagger 进入学习

    基于abp vNext和...

    2867 3

    :webapi,jwt 进入学习

    .NET Core 跨平...

    6532 15

    :saas,多租户 进入学习

    多租户SaaS...

    2738 36

    :大数据,搜索 进入学习

    Elasticsearc...

    3003 1