Jquery 子母頁面間的 json 參數傳遞

2012年5月7日星期一

Jquery 子母頁面間的 json 參數傳遞

應某位聽眾請求，他需要了解如何在「母頁面開啟子頁面後，子頁面處理資料後，傳遞 json 資料給母頁面接收」，稍微寫了一下，其實不難，但是由於本人眼力似乎趨近於老人，所以變數錯了過了很久才發現，差不多弄了兩個小時才把它弄好，實際上，只需要 10 分鐘。

1.

首先先到 JQuery 官方網站下載最新的 js 檔 (目前版本為：v1.7.2)

2.

再到 rahul 網友發布的網誌 jQuery - Encode & Decode arbitrary objects to and from JSON 中，擷取他的 json 編碼與解碼的 js 檔案

3.

接著我寫兩個頁面，a.html 將 b.html 打開後，將 email 與 password 欄位輸入值後，點擊「確認」鍵後，即將這兩個欄位藉由 $.JSON.encode 函式將欄位值打包為 json 格式，再利用 window.opener 的屬性將 json 格式資料傳回 a.html 的 jsonstring 隱藏欄位，再呼叫 a.html 的 javascript 的函式將 jsonstring 隱藏欄位值讀取出並放入所在位置，這麼一來，問題就解決了

a.html

<html>
<head>


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

<script type="text/javascript">
    function show()
    {
        var encoded = $('#jsonstring').val();
        var obj = jQuery.parseJSON(encoded);
        
        $('#email').val(obj.email);
        $('#password').val(obj.password);
    }
</script>
</head>
<body onload="abc();">
    <form name="form">
        <input type="text" id="email" name="email"/>
        <input type="text" id="password" name="password"/>
        
        <input type="hidden" id="jsonstring" name="jsonstring" />
        <br />
        <a href="b.html" target="_blank">b.html</a>
    </form>
</body>
</html>

b.html

<html>
<head>


<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="json2.js" ></script>

<script type="text/javascript">
    function dosubmit(){

        var email = $('#email').val();
        var password = $('#password').val();

        var thing = {email: email, password: password};

        var encoded = $.JSON.encode(thing);  

        var decoded = $.JSON.decode(encoded);

        $('#jsonstring').val(encoded);
        window.opener.document.all.jsonstring.value = encoded;
        
        window.opener.show();
        
        this.close(); 

    }
</script>

</head>
<body>
        <input type="text" id="email" name="email" />
        <input type="text" id="password" name="password" />
        <input type="button" onclick="dosubmit()" value="確認">

</body>
</html>

回JQuery目錄
回html目錄
回首頁

程式設計筆記

2012年5月7日星期一

Jquery 子母頁面間的 json 參數傳遞

1.

2.

3.

a.html

b.html

沒有留言 :

張貼留言

2012年5月7日 星期一

Jquery 子母頁面間的 json 參數傳遞

1.

2.

3.

a.html

b.html

沒有留言 :

張貼留言

2012年5月7日星期一