如何写JSONdata到PhoneGap的应用程序的HTML元素？ [英] How to write JSONdata to the html element in phonegap application?
问题描述
我想接收使用PhoneGap的应用程序中的JSON数据。我使用的服务器的 XAMPP PHP 服务器。在这个服务器上我有服务器code api.php 从数据库接收数据。我的笔记本电脑的IP地址的 192.168.1.4 的所以这次的本地服务器的网址为 HTTP：//192.168.1.4/Experiements/webservices/api.php
I am trying receive the JSON data using PhoneGap application. I am using server xampp php server. On this server I have server code api.php for receiving data from database. My laptop's IP address is 192.168.1.4 so the URL of this local server is http ://192.168.1.4/Experiements/webservices/api.php".
我能够使用以接收数据
alert(JSON.stringify(response));
但我想这个_email_id_信息添加到
but I want to add this _email_id_ information to
<div id="email">Email_id< /div >
这是在的index.html 确定。
从我的 Android手机我想只要登录并接收用户的EMAIL_ID。请参阅我的数据库的形象，并用我的手机上收到的数据
警报（JSON.stringify（响应））。
From my Android phone I want to just log in and and receive the email_id of that user. Please see the image of my database and and data receive on my phone using alert(JSON.stringify(response)).
我的服务器code为 api.php
My server code is 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应用code在的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>
数据库：演示用户：根，密码： 1234 ，表：注册
DataBase: demo, user: root, password: 1234, table: registration
我的手机的屏幕快照：
推荐答案
所以，如果我理解正确的，你想要做的是从响应得到 EMAIL_ID 并把内容放到 DIV 所谓的电子邮件的。
So if I understood you correctly, what you want to do is to get the email_id from the response and put the content into the div called email.
您需要做的是首先从JSON对象，它是在你的情况下，用户的电子邮件的阵列的只有一个项目。数组的这第一项又是的对象的其中包含字段名为电子邮件的，这正是我们想要的。之后，我们需要找到从 jQuery的元素选择中的DOM div和插入用户的电子邮件在里面。例如下找到。
What you need to do is to first get the user's email from the JSON object which is in your case Array with just one item. This first item of array again is Object which contains field called email which is exactly what we want. After that we need to locate the div from the DOM with jQuery element selector and insert the user's email in it. Example is found below.
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
这篇关于如何写JSONdata到PhoneGap的应用程序的HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
