Html表单将数据发布到swagger api

时间:2016-12-12 14:51:44

标签: javascript html api swagger

尝试将thourgh html5与带有swagger记录的api进行通信: myUrl / Category_API / post_api_categories 我该如何开始?我现在花了5个小时阅读关于招摇,apis,ajax,js但不知道正确的方式是什么。

我是否只有一个js代码可以在.html文件中实现以使其运行?

类似的东西:

<!DOCTYPE html>
<html>
<head>
<title>MOES Playground</title>
</head>
<body>
<script>
    var forename = $("input[name=\"forename\"]").val();
    var surname = $("input[name=\"surname\"]").val();
    var forename = $("input[name=\"forename\"]").val();
    var surname = $("input[name=\"surname\"]").val();
    var forename = $("input[name=\"forename\"]").val();
    var surname = $("input[name=\"surname\"]").val();
    var forename = $("input[name=\"forename\"]").val();
    var updated_at = $("input[name=\"pudated_at\"]").val();

    $.ajax({
    url: "myUrl/api/categories?api_key=3",
    type: "POST",
    async: true, // set to false if you don't mind the page pausing while waiting for response
    cache: false,
    dataType: "json",
    data: "{
        "id": 0,
        "description": "string",
        "image_url": "string",
        "data": "string",
        "client_id": "string",
        "title": "string",
        "created_at": "2016-12-12T14:26:19.037Z",
        "updated_at": "2016-12-12T14:26:19.037Z"
    }",
    contentType: "application/json; charset=utf-8",
    success: function(data) {
        // handle your successful response here
    },
    error: function(xhr, ajaxOptions, thrownError) {
        // handle your fail response here
    }
});
</script>

<form action="myUrl/api/categories?api_key=3" method="post">
    <input name="id" />
    <input name="description" />
    <input name="image_url" />
    <input name="data" />
    <input name="client_id" />
    <input name="title" />
    <input name="created_at" />
    <input name="updated_at" />
    <input type="submit" value="Submit" />
</form>
</body>
</html> 

1 个答案:

答案 0 :(得分:0)

解决这个问题的一种方法就是这样,然后你只需要将输入形式的值放到JSON对象中

<!DOCTYPE html>
<html lang="de" >
   <head>
      <title>Moes Playground</title>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   </head>
   <body>

   <h2>JSON Object Creation in JavaScript</h2>

<p id="demo"></p>
<script>
$(function () {
    var category = {
        "id": 20,
        "title": "string",
        "client_id": "string",
        "description": "string",
        "image_url": "string",
        "data": "string",
        "created_at": "2016-12-12T13:09:18.853Z",
        "updated_at": "2016-12-12T13:09:18.853Z"
    };
    $.ajax({
        type: "POST",
        data :JSON.stringify(category),
        url: "myUrl",
        contentType: "application/json"
    });
});
</script>
   </body>
</html>