การใช้ jQuery + AJAX + WebService อย่างง่าย

ไฟล์ที่จำเป็น

- jQuery เวอร์ชัน 1.3.2

จากนั้นเราจะมาทำการติดตั้ง jQuery กัน

วิธีการติดตั้ง jQuery

1. Download จาก http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js
2. ในโปรเจ็ค สร้าง Folder ชื่อ js
3. เอาไฟล์ jQuery.1.3.2.min.js ไปไว้ที่ Folder ชื่อ js ในข้อ 2. เป็นอันเสร็จ

เป้าหมาย : รับข้อมูลจาก หน้าเว็บ 2 ค่าแล้วส่งค่าให้ Web service คำนวณ โดยใช้วิธีการส่งค่าแบบ AJAX ด้วย jQuery

ในหน้า Default.aspx แล้วใส่คอนโทล ตามนี้

- Label ชื่อ lblResult 1 ตัว เพื่อแสดงผล

- TextBox มา 2 ตัว ชื่อ txtX กับ txtY เพื่อรับค่า

- จากนั้นก็เอาปุ่มมาวางไว้ 4 ปุ่ม เป็น Input(Button) ชื่อ btnAdd, btnDiff, btnMul, btnDiv

หน้าตาก็จะประมาณนี้นะครับ

ในหน้า  Default.aspx

เราจะมาทำการผูก Event ให้แต่ละปุ่มกันนะครับ

-          เริ่มจากการ Link ไฟล์ jQuery.1.3.2.min.js เพื่อที่จะได้ใช้คำสั่งของ jQuery ได้

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

-          เขียน script ตามนี้เพื่อผูก Event

    <script language="javascript" type="text/javascript">

        $(document).ready(function() {

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

                  var pagePath = window.location.pathname;

                       $.ajax({

                            type: "POST",

                            url: pagePath + "/test",

                            data: '{x:' + $('#<%= this.txtX.ClientID %>').val() + ',y:' + $('#<%= this.txtY.ClientID %>').val() + ',mode:1}',

                            contentType: "application/json; charset=utf-8",

                            dataType: "json",

                            success: function(msg) {

                                $('#<%= this.lblResult.ClientID%>').html(msg.d);  

                            },

                            error: function(msg){alert("error : " + msg);}

                        });

                });

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

                      var pagePath = window.location.pathname;

                       $.ajax({

                            type: "POST",

                            url: pagePath + "/test",

                            data: '{x:' + $('#<%= this.txtX.ClientID %>').val() + ',y:' + $('#<%= this.txtY.ClientID %>').val() + ',mode:2}',

                            contentType: "application/json; charset=utf-8",

                            dataType: "json",

                            success: function(msg) {

                                $('#<%= this.lblResult.ClientID%>').html(msg.d);  

                            },

                            error: function(msg){alert("error : " + msg);}

                        });

                });

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

                      var pagePath = window.location.pathname;

                       $.ajax({

                            type: "POST",

                            url: pagePath + "/test",

                            data: '{x:' + $('#<%= this.txtX.ClientID %>').val() + ',y:' + $('#<%= this.txtY.ClientID %>').val() + ',mode:3}',

                            contentType: "application/json; charset=utf-8",

                            dataType: "json",

                            success: function(msg) {

                                $('#<%= this.lblResult.ClientID%>').html(msg.d);  

                            },

                            error: function(msg){alert("error : " + msg);}

                        });

                });

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

                      var pagePath = window.location.pathname;

                       $.ajax({

                            type: "POST",

                            url: pagePath + "/test",

                            data: '{x:' + $('#<%= this.txtX.ClientID %>').val() + ',y:' + $('#<%= this.txtY.ClientID %>').val() + ',mode:4}',

                            contentType: "application/json; charset=utf-8",

                            dataType: "json",

                            success: function(msg) {

                                $('#<%= this.lblResult.ClientID%>').html(msg.d);  

                            },

                            error: function(msg){alert("error : " + msg);}

                        });

                });

          });

    </script>