Jquery Ajax無重新整理登入

廢話不多說，直接上代碼。你會發現，用了JQuery之後是如何簡單。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<code>//背景執行個體代碼 ashx檔案（可替換為從資料庫中讀取）</code>

<code>public</code> <code>void</code> <code>ProcessRequest(HttpContext context)</code>

<code>{</code>

<code>    </code><code>context.Response.ContentType = </code><code>"text/plain"</code><code>;</code>

<code>    </code><code>//context.Response.Write("Hello World");</code>

<code>        </code> 

<code>    </code><code>string</code> <code>name = context.Request.Params[</code><code>"name"</code><code>].ToString().Trim();</code>

<code>    </code><code>if</code> <code>(</code><code>"china"</code><code>.Equals(name))</code>

<code>    </code><code>{</code>

<code>        </code><code>context.Response.Write(</code><code>"1"</code><code>);</code><code>//1标志login success</code>

<code>    </code><code>}</code>

<code>    </code><code>else</code>

<code>        </code><code>context.Response.Write(</code><code>"0"</code><code>);</code><code>//0标志login fail</code>

<code>}</code>

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<code>//前台執行個體代碼 aspx檔案</code>

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;</code><code>head</code> <code>runat</code><code>=</code><code>"server"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>       </code> 

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/jquery-1.4.2.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code><code>$(function() {</code>

<code>            </code><code>$("#test").live("click", function() {</code>

<code>                </code><code>//alert(0);</code>

<code>                </code><code>$.ajax({</code>

<code>                    </code><code>type: 'POST',</code>

<code>                    </code><code>url: 'Handler1.ashx',</code>

<code>                    </code><code>data: { "name": $("#name").val() },</code>

<code>                    </code><code>success: function(data) {</code>

<code>                        </code><code>if (1 == data)</code>

<code>                            </code><code>alert('login success');</code>

<code>                        </code><code>else</code>

<code>                            </code><code>alert('login fail');</code>

<code>                    </code><code>}</code>

<code>                </code><code>});</code>

<code>            </code><code>});</code>

<code>        </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>form</code> <code>id</code><code>=</code><code>"form1"</code> <code>runat</code><code>=</code><code>"server"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"name"</code> <code>id</code><code>=</code><code>"name"</code> <code>/&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>name</code><code>=</code><code>"test"</code> <code>id</code><code>=</code><code>"test"</code> <code>value</code><code>=</code><code>"validate"</code> <code>/&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>form</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

分别在前台aspx頁面和背景ashx頁面中輸入如上代碼，就實作了一個超級簡單的Ajax登入，很簡單吧？

本文轉自 guwei4037  51CTO部落格，原文連結:http://blog.51cto.com/csharper/1345991