0

以下は入力フォームに入力したあとJSON配列に変換してリクエストを送りデータを返却しようと作成中のコードです。
しかしデータは返却されずエラーとなってしまいます。
cygwin上ではデータが返却されることは確認できています。

cygwinでのリクエストは「curl -i -v -H "Accept: application/vnd.glv.v1+json" -H "Content-type: application/json" -X GET localhost:8280/api/dept_accesses -d '{"dept_ids":["CD0004"],"start_date":"20151001","end_date":"20151207"}'」
で表示されます。
HTMLでデータが返却されればどんな形でも問題ないです。どの部分を編集すればいいか全くわかりません・・・プログラミングに詳しい方何卒宜しく御願い致します。

$(function(){ 
        $("#response").html("Response Values");

        $("#button").click( function(){ 
            var url = $("#url_post").val();

                var JSONdata = { 
                    dept_ids: $("#dept_ids").val(), 
                    start_date: $("#start_date").val(), 
                    end_date: $("#end_date").val(), 
                };

            alert(JSON.stringify(JSONdata));

            $.ajax({ 
                type : 'post', 
                url : url, 
                data : JSON.stringify(JSONdata), 
                contentType: 'application/JSON', 
                dataType : 'JSON', 
                scriptCharset: 'utf-8', 
                success : function(data) {

                    // Success 
                    alert("success"); 
                    alert(JSON.stringify(data)); 
                    $("#response").html(JSON.stringify(data)); 
                }, 
                error : function(data) {

                    // Error 
                    alert("error"); 
                    alert(JSON.stringify(data)); 
                    $("#response").html(JSON.stringify(data)); 
                } 
            }); 
        }) 
    }) 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>HTMLファイルからPOSTでJSONデータを送信する</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

</head> 
<body> 
    <h1>HTMLファイルからPOSTでJSONデータを送信する</h1> 
    <p>URL: <input type="text" id="url_post" name="url" size="100" value="http://52.192.178.185:8280/api/blog_accesses?"></p> 
    <p>dept_ids: <input type="text" id="dept_ids" size="30" value="[BD0002]"></p> 
    <p>start_date: <input type="text" id="start_date" size="30" value="20151201"></p> 
    <p>end_date: <input type="text" id="end_date" size="30" value="20151230"></p> 
    <p><button id="button" type="button">submit</button></p> 
    <textarea id="response" cols=120 rows=10 disabled></textarea> 
</body> 
</html>

3
  • どのようなエラーが発生しているのでしょうか?
    – Katsumi
    Commented 2015年12月25日 7:39
  • Katsumi様 早速のコメントありがとうございます。 スニペットを実行して「submit」を押していただければご確認いただけると思います。 Commented 2015年12月25日 7:42
  • スニペットで指定されているホストですが、タイムアウトになってしまうので確認ができません。すみませんがエラー内容をご提示できないでしょうか?
    – Katsumi
    Commented 2015年12月25日 11:37

1 件の回答 1

1

HTMLの記述内容とは別に、HTTP access control (CORS)といってWebサーバー側が他サイトからのリクエストを許可している必要があります。

1
  • sayuri様 ありがとございます。 リンク先を拝見させていただいたところサーバーガイド側で処理と書いてありますがHTML、javascriptでは対応できないということでしょうか? Commented 2015年12月25日 7:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。