JSON Web Service Sample

Di posting kemarin saya posting untuk retrieve data Web Service dengan format JSON. Pada posting kali ini saya akan sedikit membahas tentang cara untuk mengirim JSON sebagai parameter Web Service untuk input data.

Sebelumnya saya mohon maaf karena tidak menyediakan source code untuk posting kali ini.

Pada pembahasan kali ini yang kita perlukan adalah :

- Kelas/Function di JavaScript
- File JQuery.js
- Web Service dengan Parameter Kelas
- Kelas sebagai representasi tabel

Berikut ini contoh fungsi di JavaScript yang perlu kita deklarasikan, dengan contoh tabel yang sama dengan posting saya sebelumnya.

function ObjekBarang(kdbar,nmbar){this.kdbar = kdbar;this.nmbar = nmbar;}

Setelah itu kelas tersebut dapat kita buatkan instan seperti berikut :

var ar1 = document.getElementByID('txtkode').value;var ar2 = document.getElementByID('txtnama').value;
var obj = new ObjekBarang(ar1, ar2);

'txtkode' dan 'txtnama' berupa input text di HTML.

Kemudian kita gunakan function di JQuery.js untuk mengirim data ke Web Service, berikut ini adalah sintaknya.

$.ajax({
type: "POST",
url: "Service.asmx/InputBarang",
data: "{'_objek':" + JSON.stringify(obj) + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(JSON.stringify(result.d));
},
alert(result.statusText);
}
});

Dari skrip diatas sedikit penjelasannya :

"url" diisi dengan alamat Web Service dan diikuti nama procedure, "data" diisi dengan tanda kurung kurawal disertai _objek (adalah parameter procedure di Web Service) pastikan bahwa "_objek" harus sama dengan dengan deklarasi nama parameter di procedure Web Service.
JSON.stringify(obj) berfungsi untuk mengubah sruktur instan obj sehingga berbentuk notasi JSON.

Maka Web Servicenya akan berbentuk seperti dibawah ini :

Public Function InputBarang(Dim _objek as MBarang) as String ' Kode anda disini
return "success" End Function

Dari procedure diatas dapat dilihat parameter _objek, parameter ini harus sama dengan parameter di JQuery.js di bagian data seperti terlihat sebagai berikut (data: "{'_objek':" + JSON.stringify(obj) + "}")

Yang tidak kalah pentingangnya adalah kita akan membuat kelas di sisi server. Kelas ini sebagai salinan kelas yang ada di sisi client (JavaScript) dan harus mempunyai properti yang sama agar saling mengenal.

Berikut ini nama kelas serta deklarasi propertinya.

Public Class MBarang Private _kdbar As String Private _nmbar As String
Public Property kdbar() As String Get Return _kdbar End Get Set(ByVal value As String) Me._kdbar = value End Set End Property
Public Property nmbar() As String Get Return _nmbar End Get Set(ByVal value As String) Me._nmbar = value End Set End PropertyEnd Class

Recommended Reading:
JSON Web Service

Sampai disini saya harap sudah cukup jelas dan semoga posting JSON Web Service Sample diatas bermanfaat.



Salam,