jQueryの非同期通信を使って別ドメインのapiにHTMLファイルからPOSTでjsonデータを送りたい

###前提・実現したいこと
超初心者で、わからない事だらけです。(_ _）
jQueryの非同期通信を使って別ドメインにおいてあるapiに
HTMLファイルからPOSTでjsonデータを送りたいです。

###発生している問題・エラーメッセージ

エラーメッセージ
{"readyState":0,"status":0,"statusText":"error"}


###該当のソースコード
```jQuery
ここにご自身が実行したソースコードを書いてください


```ここに言語を入力
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#response").html("Response Values");

        $("#button").click( function(){

        var param1 = $("#value1").val();
        var param2 = $("#value2").prop('checked'),
        var param3 = $("#value3").val();

                var JSONdata = {
                    value1: param1,
                    value2: param2,
		  value3: param3  
                };

            alert(JSON.stringify(JSONdata));

            $.ajax({
                type : 'post',
                url : 'url',
                data :{id:param1,sousinsitai: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(JSONdata));
                },
                error : function(data) {

                    // Error
                    alert("error");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(JSONdata));
                }
            });
        })
    })
</script>

<body>
<div id="wrapper">
    
    <div>
    <label>送りたい内容1: </label>
    <input type="text" id="value1" size="30" value="">
    </div>
    
    <div>
    <label class="jizen">ここはチェック済で、データとしては、真偽値のtrueを送りたいです: </label>
    <input type="checkbox" id="value2" disabled checked>
    </div>
    <div>
    <label>送りたい内容2:</label>
    <input type="text" id="value3" size="30" value="">
    </div>
   
    <p><button id="button" type="button">submit</button></p>
    <textarea id="response" cols="80" rows="5" disabled></textarea>
</div>
</body>



###試したこと

ネットで色々検索して、親切なコードがあったので使わせていただいて
何とか上のコードを作成してみたり、
調べたら
postだとjsonpを使えないとか
クロスドメイン制約があるなどが分かりましたが、
どうしてもpostで非同期通信で送る方法とかはあるのでしょうか。

そもそも上のコードで、getとjsonpに変更して
上記のコードを実行してもalertで、エラーが帰ってきてしまいます。。。
3日間、色々やってみましたが、エラーです。
知識もスキルも無い初心者ですので、どうか正解コードがあれば教えていただきたいです。


###補足情報

送信する先に、
dataのところの
送りたいjsonデータは、入力された配列と、重複になりますがIDを別に追加して送りたいので
data :{id:param1,sousinsitai:JSON.stringify(JSONdata)},
としております。

url : 'url',
の右のurlの部分には、送り先のapiを指定しました。
apiは独自のものです。
自分のHTMLファイルはローカルに置いてあります。

kei344

2016/09/05 04:32

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

退会済みユーザー

2016/09/05 04:47

ありがとうございました。初めて利用するので何も分かっておりません。ご迷惑おかけします。

kei344

2016/09/05 04:55

apiの仕様がわかりません。ご自身で変更可能な（そのサーバに入ってコードを書き換えられる）APIでしょうか。jsonpに対応していなくて、Access-Controll-Allow-Originも返していないとなると、JavaScriptからのPOST通信を想定されていないのではないでしょうか？

退会済みユーザー

2016/09/05 06:33

ご返信ありがとうございます。気づくのが遅れました。確認してみます！ (_ _)

退会済みユーザー

2016/09/06 01:18

APIを自分自身で書き換えするスキルは無いのですが、APIを作成した方と後日いっしょに作業することになりました。解決しましたら、また投稿します。

行動規範の内容に同意します

回答2件

phpなどサーバーサイドのプログラムを咬ます選択肢はありませんか？

投稿2016/09/05 05:15

yambejp

総合スコア114769

退会済みユーザー

2016/09/05 06:14

phpを設置するサーバーを用意せず、jQuery使用が希望のようです。 (_ _)

yambejp

2016/09/05 06:25

結局、クライアント側から不正なデータを受け取らないようなサーバー管理をするので ajaxでのクロスドメイン拒否や、iframe拒否などが設定されてるんですよねつまりはサーバー側が「こないでくれ」って言っているわけで、なんらかのサーバー機能を利用しないかぎり難しいと思います。「pipes yahoo 代替処理」あたりでググッてみるとよいかもしれません

退会済みユーザー

2016/09/05 06:36

ありがとうございます！ただいま他の作業に入るように言われていますので、後ほどまた、頑張ってみます！ (_ _)

退会済みユーザー

2016/09/06 01:16

後日、APIを作成した方と一緒に作業することになりました。解決しましたらまた投稿します。

行動規範の内容に同意します