Download presentation
Presentation is loading. Please wait.
Published byNoah Bishop Modified over 8 years ago
1
jQuery form submission CIS 136 Building Mobile Apps 1
2
Data transmission 2 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
3
Data transmission 3 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 When we launch our app on Phonegap desktop, it is running on a server
4
jQuery form submission 4 jQuery Mobile will submit form data via AJAX technology data is sent directly to the action of your form the result will be 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 the response triggers a full page refresh response returns only the page div container and does not return the element with any links to the jQuery Mobile stylesheet references to the jQuery and jQuery Mobile libraries are missing in the response
5
jQuery.ajax() 5 Perform an asynchronous HTTP (AJAX) request Syntax: jQuery.ajax(url[,settings]) OR $.ajax(url[,settings]) OR $.get OR $.post(url[,settings]) (url[,settings])
6
Parameters for AJAX calls 6 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)
7
Parameters for AJAX calls (cont.) 7 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
8
Sending Data 8 The data option can contain either: a query string of the form key1=value1&key2=value2 an object of the form {key1: 'value1', key2: 'value2'} If this format is used, the data is converted into a query string
9
Object example 9 $.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).success(function( msg ) { alert( "Data Saved: " + msg ); }); var menuId = $( "ul.nav" ).first().attr( "id" ); var request = $.ajax({ url: "script.php", type: "POST", data: { id : menuId }, dataType: "html“ }); request.success(function( msg ) { $( "#log" ).html( msg ); }); request.error(function( jqXHR, textStatus ) { alert( "Request failed: " + textStatus ); });
10
Querystring example 10
11
Serialization 11 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
12
Serialization 12 Serializing will format the data to be passed to the data parameter of ajax() method. Ex: will read all form fields with id tracking-form
13
Client side validation 13 most common types of validation are: presence of a required input valid usernames/emails/phone numbers/etc checking an "I agree…" box Ex: checks if a required field doesn't have anything in it, and prevents the form from processing
14
What we are building 14
15
App’s page-view 15
16
AJAX call that initiates the transmission 16
17
Server program 17
18
Returning back to AJAX call 18
19
Displaying next page-view 19
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.