# This script demonstrates how to send form data from the client browser # back up to the server using an XMLHttpRequest with JSON content. # package require wapp # The default page paints a form to be submitted. # The default content-security-policy of Wapp restricts the use # of in-line javascript, so the script content must be returned by # a separate resource. # proc wapp-default {} { wapp-trim {

Example Of Sending Form Data As JSON Using AJAX

 
 
 
} } # This is the javascript that takes control of the form and causes form # submissions to be send using XMLHttpRequest with JSON content # proc wapp-page-script.js {} { wapp-mimetype text/javascript wapp-cache-control max-age=3600 wapp-trim { document.getElementById("nameForm").onsubmit = function(){ function val(id){ return document.getElementById(id).value } var jx = { "firstname":val("firstName"), "lastname": val("lastName"), "age": val("age") } var xhttp = new XMLHttpRequest(); xhttp.open("POST", "%string([wapp-param SCRIPT_NAME])/acceptjson", true); xhttp.setRequestHeader("Content-Type","text/json"); xhttp.send(JSON.stringify(jx)); return false } } } # This page accepts a form submission and prints it on standard output. # A real server would do something useful with the data. # proc wapp-page-acceptjson {} { puts "Accept Json Called" puts "mimetype: [list [wapp-param CONTENT_TYPE]]" puts "content: [list [wapp-param CONTENT]]" } wapp-start $argv