Как написать JSONdata в элемент html в приложении phonegap?

Я пытаюсь получить данные JSON с помощью приложения PhoneGap. Я использую сервер xppp php server. На этом сервере у меня есть серверный код api.php для получения данных из базы данных. IP-адрес моего ноутбука – 192.168.1.4, поэтому URL-адрес этого локального сервера : http: //192.168.1.4/Experiements/webservices/api.php ".

Я могу получить данные, используя

alert(JSON.stringify(response));

но я хочу добавить эту _email_id_ информацию в

 <div id="email">Email_id< /div >

который определяется в index.html .

С моего телефона Android я хочу просто войти в систему и получить email_id этого пользователя . Пожалуйста, смотрите изображение моей базы данных и данные, полученные на моем телефоне, с помощью предупреждения (JSON.stringify (response)).

Мой код сервера – api.php

 <?php header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request mysql_connect("localhost","root","1234"); mysql_select_db("demo"); if(isset($_GET['type'])) { if($_GET['type']=="login"){ $username=$_GET['UserName']; $Password=$_GET['Password']; $query="Select * from registration where UserName='$username' and Password='$Password'"; $result=mysql_query($query); $totalRows=mysql_num_rows($result); if($totalRows>0){ $recipes=array(); while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){ $recipes[]=array('User'=>$recipe); } $output=json_encode(($recipes)); echo $output; } } } else{ echo "Invalid format"; }

Код приложения PhoneGap находится в index.html

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="format-detection" content="telephone=no"/> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <title> Database Application</title> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).ready(function(){ $("#btnLogin").click(function(){ var userId = document.getElementById('id').value; var userPassword = document.getElementById('password').value; $.ajax({ url:"http://192.168.0.106/Experiements/webservices/api.php", type:"GET", dataType:"json", data:{type:"login", UserName:userId,Password:userPassword}, ContentType:"application/json", success: function(response){ alert(JSON.stringify(response)); console.log(JSON.stringify(response)); var userEmail = response[0].User.email; // Find the email from the JSON var emailDiv = $("div#email"); // Find the div for email with jQuery selector emailDiv.text(userEmail); // Put user's email as text to that div }, error: function(err){ alert(JSON.stringify(err)); } }) }); }); </script> <script type="text/javascript"> document.addEventListener("deviceready",OnDeviceReady,false); function OnDeviceReady(){ //alert("cordova is loaded"); } </script> </head> <body> User ID : <input type="text" id="id" name="user" /> User Password : <input type="text" id="password" name="password" /> <input type="button" id="btnLogin" name="btnLogin" value="Login"/> <div id="email">Email_id</div> </body> </html>

База данных: демо , пользователь: root , пароль: 1234 , таблица: регистрация введите описание изображения здесь

Снимок экрана моего телефона:

введите описание изображения здесь