[WhatsOld] Hi! Json.NET and post data to iframe : 認識 Json.NET 並用 post 方式傳資料到 iframe 裡

Combo4

今天接著回到本來要玩的 Json.NET，官網上（連結）也講得很清楚基本該怎麼用，但是沒有動手做之前，我還是覺得對 Json.NET 有點距離感。到 CodePlex 上面的 Json.NET Downloads 下載了最新的版本 Json.NET 4.5 Release 11 (source + binary) ，來動手吧！

哦！另一個主角是 iframe，iframe 有什麼特別的？已經每天在用啦！
是阿，但是它有一招別人玩很久的而我還沒玩過，用 iframe 來做非同步執行的網頁。除了已經流行很久的 AJAX (Asynchronous Javascript And XMLHttpRequest)，兩年前同事有說，用 iframe 做的非同步執行方式也行之有年了。今天先從 post 資料到 iframe 開始吧。

怎麼 post 資料到 iframe ？這裡有講 XD 參考後，把我昨天的 json2Test 改成這個樣子，

javascript /

function fillParameter() {
    var objTest = {};
    objTest.account = "lozentest";
    objTest.password = "123123";

    var loginConditions = document.getElementsByName("loginConditions")[0];
    loginConditions.value = JSON.stringify(objTest);
}

html /

<form action="http://localhost:2363/jsonNet20Test/jsonServices.ashx" target="serviceContainer" method="post">
    <input name="loginConditions" type="hidden" />
    <input type="submit" onclick="fillParameter();" />
</form>
<span id="result"></span>
<div>
an iframe/<br />
<iframe name="serviceContainer" src="http://localhost:2363/jsonNet20Test/jsonServices.ashx" width="100%"></iframe>
</div>

jsonServices.ashx 和兩個相關類別 /

context.Response.ContentType = "text/plain";

string jsonLoginConditions = context.Request.Form["loginConditions"] ?? "";
context.Response.Write("context.Request.Form[\"loginConditions\"] = '" + jsonLoginConditions +"'");
context.Response.Write("\n\n");

if (jsonLoginConditions != "")
{
    LoginConditions loginConditions = JsonConvert.DeserializeObject<LoginConditions>(jsonLoginConditions);
    context.Response.Write("loginConditions.account = '" + loginConditions.account + "'");
    context.Response.Write("\n");
    context.Response.Write("loginConditions.password = '" + loginConditions.password + "'");
    context.Response.Write("\n\n");

    LoginResult loginResult = new LoginResult();
    loginResult.isSuccess = false;
    loginResult.errMsg = "account is invalid!";
    string jsonLoginResult = JsonConvert.SerializeObject(loginResult);
    context.Response.Write("jsonLoginResult = '" + jsonLoginResult + "'");
}

public class LoginConditions
{
    public string account;
    public string password;
}

public class LoginResult
{
    public bool isSuccess;
    public string errMsg;
}

最後，把我的 HTML 檔案用瀏覽器開起來，按下那顆鈕，就完成啦！

其實也沒那麼順利 ...

第一個遇到的問題就是 jsonServices.ashx 上面的 Request.Form["loginConditions"] 抓不到值！？原來是 <input id="loginConditions" type="hidden" /> 裡面要再加個 name="loginConditions" ，Request.Form 認的是 name ...（ASP.NET 寫太久，我連這最基本的規則都忘了 Qrz）

第二個遇到的問題是把 input 的 id 拿掉，只留 name 之後，用 getElementsByName("loginConditions") 抓出來的物件取不到 value 內容！？原來 getElementByName 回傳的是陣列 Qrz 

大概就這樣囉。附上我的作業檔 連結，晚安～