Mobile Web App login and show data in tables using jquery ajax and php -
i creating app let's students login , show module have registered in styled tables. have done server side login , respond in json format have little knowledge in ajax , jquery not sure how use json keys values of variables in jquery.
this is have on server side , responds in json upon successful or failed login , return student info + modules (to added sql query) :
<?php ob_flush(); ob_clean(); ob_end_flush(); ob_end_clean(); ob_start(); $server = "sqlserveraddress\sqlexpress"; $connectioninfo = array( "database"=>"dbname", "uid"=>"sa", "pwd"=>"sqlpassword" ); $conn = sqlsrv_connect( $server, $connectioninfo ); $username=$_post["sid"]; $password1= sha1($_post["password"]); $sql = "select name, sid, dob students sid = '$username' , ` `password='$password1'"; $params = array(); $options = array( "scrollable" => sqlsrv_cursor_keyset ); $stmt = sqlsrv_query( $conn, $sql , $params, $options); $row_count = sqlsrv_num_rows($stmt); while( $row = sqlsrv_fetch_array( $stmt, sqlsrv_fetch_assoc) ) { $dob = $row['dob']; $name = $row['name']; if ($row_count == 1) { $return = array('name' => $name,'dob' => $dob, 'status' => 'success' ); header("content-type: application/json"); echo json_encode($return); } else { $return = array('status' => 'fail'); echo "student id or password wrong!!!"; } } ?> this login.js @ moment posts data php , presented output of json example:
{ "name":"jams matts ","dob":"04-02-1991","status":"success" }
login.js:
$.post("",{ sid: sid, password:password}); $.ajax({ type : "post", url : "http://serverip/login.php", crossdomain: true, beforesend : function() {$.mobile.loading('show')}, complete : function() {$.mobile.loading('hide')}, data : {sid : $("#sid").val(), password : $("#passord").val()}, datatype : 'json', success : function(response) { //console.error(json.stringify(response)); alert('works!'); }, error : function() { //console.error("error"); alert('now working!'); } }); so want have user redirected home page he/she can see modules (depending on how many have) , now, welcome $name (that returned json suppose)
and index.html(using phonegap):
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- warning: ios 7, remove width=device-width , height=device-height attributes. see https://issues.apache.org/jira/browse /cb-4323 --> <meta name="viewport" content="user-scalable=no, initial- scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>hello world</title> <script type="text/javascript" src="https://ajax.googleapis.com /ajax/libs /jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/login.js"></script> </head> <body> <div class="app"> <h1>mygrade</h1> <div id="deviceready" class="blink"> <p class="event listening"> </p> <div class="loginform-in"> <h1>user login</h1> <div class="err" id="add_err"></div> <fieldset> <form action="http://serverip/index.php" method="post"> <ul> <li> <label for="name">sid </label> <input type="text" size="30" name="sid" id="sid" /></li> <li> <label for="name">password</label> <input type="password" size="30" name="password" id="password" /></li> <li> <label></label> <input type="submit" id="login" name="login" value="login" class="loginbutton" ></li> </ul> </form> </fieldset> </div> <p class="event received"> </p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/login.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>
Comments
Post a Comment