Download
1 / 16
160 likes | 180 Views
Learn how to exchange information between your app and a server using jQuery for seamless data transmission. jQuery forms, serialization, and AJAX calls are key components.
E N D
jQuery form submission CIS 136 Building Mobile Apps
Data transmission • Just about any App you can visualize needs to exchange information • A restaurant App needs to pull menus or coupons quickly, so you can figure out what to eat tonight • A video game App needs to let you log your high scores, or challenge your friends • A weather App needs to figure out where you are, and then collect weather information to show you, so you can plan your outdoor day • A news App is grabbing news off the internet to condense and display to you quickly • What do they all have in common? • Somewhere – in the Cloud – there’s a server that is sending and receiving data
Data transmission • You need to have a server to store your data if your app • has some kind of authentication/login • some kind of customization that you want to change it yourself at any time • even a simple form to receive information from the user • you need to have a way for the device to communicate with the server • sending data to and receiving data from this server
jQuery form submission • jQuery Mobile will submit form data via AJAX technology • data is sent directly to program you specify, which in turn will act upon the data, and return some information • the information returned is available to the page that made the AJAX call • No page reload • To use a standard http submission • set the data-ajax attribute = false on the form tag <form data-ajax=“false” action=“mobile.php” method=“post”> • the response triggers a full page refresh
jQuery.ajax() • Perform an asynchronous HTTP (AJAX) request • Syntax: jQuery.ajax(url[,settings]) OR $.ajax(url[,settings]) OR $.get OR $.post(url[,settings]) (url[,settings])
Parameters for AJAX calls • url – required • a string containing the URL to which the request is sent • settings – optional • A set of key/value pairs that configure the Ajax request • data - Data to be sent to the server. It is converted to a query string, if not already a string • datatype - The type of data that you're expecting back from the server (xml,html,script,json,text) • type - The type of request to make (e.g. "POST", "GET", "PUT"); default is "GET". (if using $.ajax)
Parameters for AJAX calls (cont.) • success - A function to be called if the request succeeds • gets passed three arguments • The data returned from the server • a string describing the status • The jQuery XMLhttpRequest object • error - A function to be called if the request fails • Gets passed three arguments • The jqueryXMLHttpRequest object • a string describing the type of error that occurred • an optional exception object
Sending Data using Serialization • The serialize() method will create the string with the key/value pairs (field name =field content)in the correct format • The serializeArray() method will create an array of objects
Serialization • Serializing will format the datato be passed to the data parameter of ajax() method. • Ex: will read all form fields with idattribute=“tracking-form”
Examples • varformData = =$('#formName').serialize(); var request = $.ajax({ url: “http://www.myweb.com/script.php", type: "POST", • data: { name: "John", location: "Boston" }, dataType: "html“ }); request.success(function( msg ) { $( "#log" ).html( msg ); }); request.error(function( request, textStatus ) { alert( “Transmission failed "); }); • varformData = =$('#formName').serialize(); var request = $.ajax({ url: “http://www.myweb.com/script.php", type: "POST", data: formData, dataType: "html“ }); request.success(function( msg ) { $( "#log" ).html( msg ); }); request.error(function( request, textStatus ) { alert( “Transmission failed "); });
