BackUp LevelNext

Transferring Data From Browser to Server

This example serializes form field data, posts it to the server, deserializes it, and outputs the data. For simplicity, only a small amount of data is collected. In applications where complex JavaScript data collections are generated, this basic approach can be extended very effectively.

<!--- Get WDDX JS utility objects --->
<script language="JavaScript" 
    src="/CFIDE/scripts/wddx.js"></script>

<!--- Add data binding code --->
<script>

    // Generic serialization to a form field
    function serializeData(data, formField)
    {    
        wddxSerializer = new WddxSerializer();
        wddxPacket = wddxSerializer.serialize(data);
        if (wddxPacket != null)
        {
            formField.value = wddxPacket;
        }
        else
        {
            alert("Couldn't serialize data");
        }
    }
    
    // Person info recordset
    var personInfo = new WddxRecordset(new Array("firstName",
    "lastName"));

    // Add next record
    function doNext()
    {
        nRows = personInfo.getRowCount();
        personInfo.firstName[nRows] =
        document.personForm.firstName.value;
        personInfo.lastName[nRows] = document.personForm.lastName.value;
        document.personForm.firstName.value = "";
        document.personForm.lastName.value = "";
    }

</script>    

<!--- Data collection form ---> 
<form action="wddx_browser_2_server.cfm" method="post"
name="personForm">

    <!--- Input fields --->
    Personal information<p>
    First name: <input type=text name=firstName><br>
    Last name: <input type=text name=lastName><br>
    <p>
    
    <!--- Navigation & submission bar --->
    <input type="button" value="Next" onclick="doNext()">
    <input type="button" value="Serialize"
    onclick="serializeData(personInfo, document.personForm.wddxPacket)">
    <input type="submit" value="Submit">
    <p>
    
    <!--- This is where the WDDX packet will be stored --->
    WDDX packet display:<p>
    <textarea name="wddxPacket" rows="10" cols="80" wrap="Virtual"><
    /textarea>
    
</form>

<!--- Server-side processing --->
<hr>
<p><b>Server-side processing</b><p>
<CFIF isdefined("form.wddxPacket")>
    <CFIF form.wddxPacket neq "">

        <!--- Deserialize the WDDX data --->
        <CFWDDX action="wddx2cfml" input=#form.wddxPacket#
        output="personInfo">

        <!--- Display the query --->
        The submitted personal information is:<p>
        <CFOUTPUT query=personInfo>
            Person #CurrentRow#: #firstName# #lastName#<br>
        </CFOUTPUT>
    <CFELSE>
        The client did not send a well-formed WDDX data packet!

    </CFIF>
<CFELSE>
    No WDDX data to process at this time.
</CFIF>


BackUp LevelNext

allaire

AllaireDoc@allaire.com
Copyright © 1998, Allaire Corporation. All rights reserved.