コードを切り取って貼り付けないようにしているので、データをWebサーバーに保存するためのラッパーを作成しました。
function saveData(newData) {
//clear our error message out.
$("#Status").html("");
var anID;
//save the data to the server
$.ajax({
type: "POST",
url: "/John/SaveSomeData",
data: JSON.stringify(newData),
async: false,
contentType: 'application/json; charset=utf-8',
datatype: "json",
traditional: false,
success: function (sReturn) {
anID = parseInt(sReturn);
if (isNaN(anID)) {
$("#Status").html("Error: " + sReturn);
return -1;
}
}
}); //end AJAX call
return anID;
} //end save data
基本的に、上記の関数は、機能した場合は正の整数を返し、サーバーからエラーが発生した場合は-1を返します。Webサーバーは、データが正常に追加された場合は整数値を返し、エラーが発生した場合はテキストを返します。
送受信されるデータはバイト単位で測定されます...絶対的な最悪の場合は200バイトです(はい、バイト、キロ、メガ、ギガではありません...バイトだけです)。送信されるデータとそれを処理する時間。
私は上記のコードを次のように使用します(1つは追加ボタンで、もう1つは保存ボタンで):
$("#addButton").click(function (event) {
//validate data locally
//cut some unimportant code
var newData = /*newdata junk cut*/
var myID = saveData(newData);
if (myID != -1) {
//cut code for adding result to a list
//snip the rest of the code
私が抱えている明らかな問題は、jqueryがajax呼び出しを起動し、ajax呼び出しが終了するのを待たずに続行することです。基本的に、サーバーは「追加に失敗しました」を返す可能性があり、「ボタンの追加イベント」は成功したかのように処理を続行します。
Webサーバーに送信されるデータは良好で、正しく処理され、Webサーバーからの応答は正しいです。これは純粋に同期/非同期の問題であり、サーバーとの間のデータではありません。
私の理解では、「async:false」の行は、jqueryにajax呼び出しが終了するのを待ってから他のことをするように強制する必要があります。
追加と保存で何が起こるかについてのコーディングは異なるので、私はAjaxでコードを入れたくありませんでした。
ajax部分を次のようなものに変換する必要がありますか?
var ajaxReturn = $.ajax({
type: "POST",
url: remote_url,
async: false, }).responseText;
ajaxReturn.done(function(msg) {
$("#log").html( msg );
});
ajaxReturn.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});