html形式でjquery、json、ajaxを使用するには？

フォームがhtmlで埋められるときにjsonを送信する必要があります。html形式でjquery、json、ajaxを使用するには？

<head> 
<title>Insert title here</title> 
</head> 
<body> 
<form id="form"> 
    Nome: <input type="text" id="nome" /> 
    Idade: <input type="number" id="idade" /> 
    <input type="button" id="submit" value="submit"/> 
</form>

と、次のJS：

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" 
var arr = { 
    City : 'Moscow', 
    Age : 25 
}; 

$(document).ready(function() { 
    //click on button submit 
    $("#submit").on('click', function() { 
     //send ajax 
     $.ajax({ 
      url : 'http://localhost:8080/DBRest/rest/escreve', 
      type : "POST", // type of action POST || GET 
      dataType : 'json', // data type 
      contentType : 'application/json; charset=utf-8', 
      data : $("#form").serialize(), // post data || get data 
      data : JSON.stringify(arr) 
     }) 
    }); 

});

私はすでにhere、hereとhereのために見ている私は、次のHTMLを持っています。

arrという変数を作成して、塗りつぶされたフォームを模倣しようとしましたが、何も得られませんでした。私はdataTypeとcontentTypeの違いを知りたいです。この特定の行について：

data : $("#form").serialize()

これは間違いありませんか？単純引用符と二重引用符の違いがあります#form

出典

2016-11-23 GabrielRado

問題はフォーム提出ではありませんか？おそらく '$（ '＃form'）を試してみてください。（submit '、function（e）{e.preventDefault（）; //あなたがやっていたことを続けて}};'ボタン。 – Gavin

まず、dataプロパティを2回設定しています。 data: JSON.stringify(arr)を削除します。

第2に、シリアライズされたフォームを送信すると、JSONではなくx-www-form-urlencodedとなるため、contentTypeプロパティを削除する必要があります。エンコードされたフォームはデフォルトです。

あなたのHTML input要素には、サーバーの値のシリアル化と値の取得に必要な、必要なname属性がありません。

Nome: <input type="text" id="nome" name="nome" /> 
Idade: <input type="number" id="idade" name="idade" />

最後に、あなたがform要素のsubmitイベントにイベントハンドラをフックし、標準の提出を停止するpreventDefault()を呼び出して、次のようにする必要があります

$("#form").on('submit', function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     url: 'http://localhost:8080/DBRest/rest/escreve', 
     type: "POST", 
     dataType: 'json', 
     data: $("#form").serialize() 
    }) 
});

おそらくあなたもsuccessとerrorハンドラをしたいです要求から返された応答を処理するために、関数（またはdone()およびfail()メソッド）を使用します。

出典

2016-11-23 13:51:08

申し訳ありませんが、動作しませんでした。 ChromeのF12機能に問題はありませんでした。私はあなたに何かフィードバックを送ることができますか？それを分析してデバッグするより良い方法はありますか？ – GabrielRado

「うまくいかない」とはどういう意味ですか？あなたは何を期待していますか？まず、コンソールの[ネットワーク]タブで要求をチェックし、応答コードが「200 OK」であることを確認します。また、あなたのAJAX呼び出しでコールバックハンドラが不足しているため、UIが更新されません。 –

415エラーが発生し、 'dataType： 'application/json'を変更して解決しました。 '。それ以外に、少し変わっていない。ありがとうございました – GabrielRado

ここで問題は、フォームが<input name=パラメータを使用してシリアル化されていることです。など。

<input type="text" id="nome" name="nome" />

出典

2016-11-23 13:52:11 Zoka

html形式でjquery、json、ajaxを使用するには？

答えて

関連する問題