JQuery が JSON モードでサーバーにデータを送信するサンプル code

JQuery が JSON モードでサーバーにデータを送信するサンプル code_jquery

WBOY

リリース： 2016-05-16 16:49:51

オリジナル

989 人が閲覧しました

JQuery は Ajax データリクエストをカプセル化するため、この操作の実装がはるかに簡単になります。以前は、この関数を実装するには多くのコードを記述する必要がありましたが、現在は $.ajax() メソッドを呼び出して、リクエストメソッド、アドレス、データ型、コールバックメソッドを指定するだけで済みます。次のコードは、クライアントフォームデータを JSON 形式にカプセル化し、JQuery の Ajax リクエストを通じてサーバーにデータを送信し、最後にデータベースにデータを保存する方法を示しています。サーバーは .ashx ファイルとして定義されます。実際、サーバーは、Web サービス、ASP.NET ページ、ハンドラーなど、クライアントデータを受信して処理できる任意のタイプとして定義できます。

まず、クライアント側で、JavaScript スクリプトを通じてページフォームデータが JSON 形式にカプセル化されます。 GetJsonData() 関数はこの関数を完了します。次に、$.ajax() メソッドを通じてサーバー上の RequestData.ashx にデータを送信します。 JSON.stringify() メソッドが使用され、クライアントから送信されたデータを JSON オブジェクトに変換できます。詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/ を参照してください。参照 /Global_Objects/JSON/stringify

コードをコピーコードは次のとおりです。

 
$( "#btnSend" ).click(function() { 
$("#request-process-patent").html("データを送信しています。現在のウィンドウを閉じないでください..."); 
$ .ajax({ 
type: "POST", 
url: "RequestData.ashx", 
contentType: "application/json; charset=utf-8", 
data: JSON.stringify( GetJsonData()), 
dataType: "json", 
success: function (message) { 
if (message > 0) { 
alert("リクエストは送信されました。連絡させていただきます"); 
} 
}, 
error: function (message) { 
$("#request-process-patent").html("データの送信に失敗しました。 "); 
} 
}); 
}); 

function GetJsonData() { 
var json = { 
"classid": 2, 
" name": $("#tb_name" ).val()、
"zlclass": "テスト タイプ 1、テスト タイプ 2、テスト タイプ 3"、
"pname": $("#tb_contact_people") .val(), 
" tel": $("#tb_contact_phone").val() 
}; 
return json; 

 

サーバーコード RequestData.ashx を確認します。

コードをコピーしますコードは次のとおりです。

[シリアル化可能] 
パブリック クラス RequestDataJSON 
{ 
パブリック文字列名 { セット; } 
public string pname { set; } 
 public string tel { get; } 

/// 
/// の概要RequestData 
///  
public class RequestData : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
int num = 0; .Response.ContentType = "アプリケーション/json"; 
 var data = context.Request; 
var stream = sr.ReadToEnd(); var javaScriptSerializer = new JavaScriptSerializer(); 
var PostedData = javaScriptSerializer.Deserialize(stream); 

tb_query obj = new tb_query(); 🎜>obj.name = PostedData.name; 
obj .zlclass = PostedData.zlclass; 
obj.tel = PostedData.tel; context.Request.UserHostAddress.ToString(); 
obj .posttime = DateTime.Now.ToString(); 

使用してみます (var ctx = new dbEntities()) 🎜>{ 
ctx.tb_query.AddObject(obj) ; 
num = ctx.SaveChanges(); 
} 
} 
キャッチ (例外メッセージ) 
{ 
コンテキスト.Response.Write(msg.Message); 

context.Response.ContentType = "text/plain" 
context.Response.Write(num); >
public bool IsReusable 
{ 
 get 
{ 
return false; 
} 
} 
} 

 
クラス RequestDataJSON を定義しますSerializable 属性を使用してクライアント データを返します。シリアル化してデータを取得し、データベースに保存します。上記のコードでは EntityFramework が使用されているため、データベース対話コードが非常に簡潔になります。戻り結果には 2 種類あり、ajax のコールバック関数 success() と error() に対応します。 success() コールバック関数では、戻り結果の値が 0 より大きい場合、EntityFramework を通じてデータベースに追加されたレコードの数を示します。error() コールバック関数では、戻り結果に特定の情報が表示されます。失敗。 

RequestData クラスは IHttpHandler インターフェイスを継承し、クライアントのリクエストを同期的に処理することを示します。もちろん、IHttpAsyncHandler インターフェイスを継承して非同期要求を処理するように変更することもできます。コード インターフェイスは同様です。