2016-12-12 7 views
-1

スワッガーで文書化されているapiと通信しようとしています: myUrl/Category_API/post_api_categories どうすればいいですか?私は今、5時間をswagger、apis、ajax、jsについて読んだが、適切な方法が何であるか分かりませんでした。Htmlフォーム投稿データをスワッガーAPIに

実行するために.htmlファイルに実装できるjsコードはありませんか?

このような何か:

<!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> 
+0

あなたの問題は思えJSONオブジェクトにinputformsから値を取得する必要があります非常に基本的な構文エラーが原因です。ブラウザのデベロッパーツールでJavaScriptコンソールを開き、そこにあるエラーメッセージを読んでください。 – Quentin

+0

エラーメッセージには適切なテキスト形式がないので、私はutf8を実装していないので、デバッガにエラーメッセージは表示されませんが、それでも動作しません。私は今、メッセージ "{エラー": "(マップなし?)}"をブラウザ自体に入れます。 –

+0

そのコードは**エラーがスローされます。** Uncaught SyntaxError:無効または予期せぬトークン* – Quentin

答えて

0

これはこのようなものになるだろう解決する1つの方法は、uがちょうど

<!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> 
+0

このソリューションについてもう一度間違っていますか? –