Developing ColdFusion Applications
Interacting with Remote Servers

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 that generate complex JavaScript data collections, you can extend this basic approach very effectively. Note that this example uses the WddxSerializer JavaScript object to serialize the data, and the cfwddx tag to deserialize the data.

To use the example:

1. Save it in the myapps directory as wddxSerializeDeserialze.cfm
2. Display http://localhost/myapps/wddxSerializeDeserialze.cfm in your browser.
3. Enter a first name and last name in the form fields.
4. Click Next.

   The name appears in the Names added so far box.

5. Repeat steps 3 and 4 to add as many names as you wish.
6. Click Serialize to serialize the resulting data.

   The resulting WWDX packet appears in the WDDX packet display box. This step is intended only for test purposes. Real applications handle the serialization automatically.

7. Click Submit to submit the data.

   The WDDX packet is transferred to the server-side processing code, which deserializes it and displays the information.

<!--- load the wddx.js file --->

<script type="text/javascript"

  src="/CFIDE/scripts/wddx.js"></script>



<!--- 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 record set with columns firstName and lastName

  // Make sure the case of field names is preserved

  var personInfo = new WddxRecordset(new Array("firstName",

  "lastName"), true);



  // Add next record to end of personInfo record set

  function doNext()

  {

    // Extract data

    var firstName = document.personForm.firstName.value;

    var lastName = document.personForm.lastName.value;

    

    // Add names to record set

    nRows = personInfo.getRowCount();

    personInfo.firstName[nRows] = firstName;

    personInfo.lastName[nRows] = lastName;

    

    // Clear input fields

    document.personForm.firstName.value = "";

    document.personForm.lastName.value = "";

    

    // Show added names on list

    // This gets a little tricky because of browser differences

    var newName = firstName + " " + lastName;

    if (navigator.appVersion.indexOf("MSIE") == -1)

    {

      document.personForm.names[length] = 

        new Option(newName, "", false, false);

    }

    else

    {

      // IE version

      var entry = document.createElement("OPTION");

      entry.text = newName;

      document.personForm.names.add(entry);

    }



  }



</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>

  Names added so far:<br>

  <select name="names" size="5">

  </select>

  <p></p>

  

  <!--- This is where the WDDX packet will be stored --->

  <!--- In a real application this would be a hidden input field. --->

  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>

Copyright © 2001, Macromedia Inc. All rights reserved.

---