MVC TIP3：JQuery通過Ajax送出表單并傳回結果

在開始介紹使用JQuery送出表單之前，先看一下非Ajax送出表單的形式，如下：

1：非Ajax

前台：

<a href="http://images.cnblogs.com/cnblogs_com/luminji/201107/201107310859128819.png"></a>

對應背景：

<a href="http://images.cnblogs.com/cnblogs_com/luminji/201107/201107310859146669.png"></a>

2：JQuery之Ajax

<a href="http://images.cnblogs.com/cnblogs_com/luminji/201107/201107310859151836.png"></a>

功能要求：Ajax送出表單，在控制器HelloWorld4Controller中處理請求，并傳回若幹資料，資料格式為JSON。

首先，我們假設傳回的JSON實體為：

<code>public</code> <code>class</code> <code>LoginResultDTO</code>

<code>{</code>

<code>    </code><code>public</code> <code>bool</code> <code>Success {</code><code>get</code><code>;</code><code>set</code><code>; }</code>

<code>    </code><code>public</code> <code>string</code> <code>Message {</code><code>get</code><code>;</code><code>set</code><code>; }</code>

<code>    </code><code>public</code> <code>string</code> <code>ReturnUrl {</code><code>get</code><code>;</code><code>set</code><code>; }</code>

<code>}</code>

控制器部分的代碼為：

<code>public</code> <code>class</code> <code>HelloWorld4Controller : Controller</code>

<code>    </code><code>public</code> <code>ActionResult Index()</code>

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

<code>        </code><code>if</code> <code>(Request.IsAjaxRequest())</code>

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

<code>            </code><code>string</code> <code>str1 = Request.Form[</code><code>"Text33"</code><code>];</code>

<code>            </code><code>string</code> <code>str2 = Request.Form[</code><code>"Text44"</code><code>];</code>

<code>            </code><code>return</code> <code>Json(</code><code>new</code> <code>MvcApplication5.Controllers.HelloWorld3Controller.LoginResultDTO { Success =</code><code>true</code><code>, Message = str1 + str2, ReturnUrl =</code><code>"SomeUrl"</code> <code>});</code>

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

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

<code>            </code><code>return</code> <code>View();</code>

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

上面的代碼告訴我們，如果我們想要傳回别的實體，也是很友善的的。

前台部分代碼：

<a href="http://images.cnblogs.com/cnblogs_com/luminji/201107/201107310859175815.png"></a>

如果按鈕不使用submit，而是button，則上圖代碼換成如下形式：

<a href="http://images.cnblogs.com/cnblogs_com/luminji/201107/201107310859194471.png"></a>

本文轉自最課程陸敏技部落格園部落格，原文連結：http://www.cnblogs.com/luminji/archive/2011/07/31/2122492.html，如需轉載請自行聯系原作者