如何将JSONdata写入phonegap应用程序中的html元素？ [英] How to write JSONdata to the html element in phonegap application?
问题描述
我正在尝试使用PhoneGap应用程序接收JSON数据。我使用服务器 xampp php 服务器。在此服务器上，我有用于从数据库接收数据的服务器代码 api.php 。我的笔记本电脑的IP地址为 192.168.1.4 ，因此本地服务器的网址为 http：//192.168.1.4/Experiements/webservices/api.php 。
我可以使用
接收数据 alert（JSON.stringify（response））;
但我想将此_email_id_信息添加到
< div id =email> Email_id< / div>
从
中定义的 Android手机我只想登录并接收该用户的email_id 。请使用
alert（JSON.stringify（response）查看我的数据库的图像， ））。
我的服务器代码是 api.php
<？php
header（'Access-Control-Allow-Origin：*'）; //应该在Cross Domaim ajax中调用调用请求
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格式无效
}
我的PhoneGap应用程序代码位于 index.html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< meta name =format-detectioncontent =telephone = no/>
< script type =text / javascriptsrc =cordova.js>< / script>
< script type =text / javascriptsrc =js / index.js>< / script>
< title>数据库应用程序< / title>
< meta name =viewportcontent =user-scalable = no，initial-scale = 1，maximum-scale = 1，width = device-width>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，target-densitydpi = medium-dpi，user-scalable = 0/>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css>
< link rel =stylesheethref =// code.jquery.com/ui/111.2/themes/smoothness/jquery-ui.css\">
< link rel =stylesheethref =/ 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/111.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 ，密码：userPassword}，
ContentType：application / json，
success：function（response）{
alert（JSON.stringify（response））;
console.log （JSON.stringify（response））;
var userEmail = response [0] .User.email; //从JSON中查找电子邮件
var emailDiv = $（div＃email）; //使用jQuery选择器找到电子邮件的div
emailDiv.text（userEmail）; //将用户的电子邮件作为文本放入div
}，
错误：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>
用户ID：< input type =textid =idname =user/>
用户密码：< input type =textid =passwordname =password/>
< input type =buttonid =btnLoginname =btnLoginvalue =Login/>
< div id =email> Email_id< / div>
< / body>
< / html>
DataBase：演示，用户： root ，密码： 1234 ，表格：注册
我的手机屏幕截图：
解决方案所以，如果我理解正确的你，什么你想要做的是从响应得到
EMAIL_ID，并把内容放到DIV所谓的电子邮件。
您需要做的是首先从JSON对象，它是在你的情况下，用户的电子邮件的阵列的只有一个项目。数组的第一个项目是对象，其中包含称为电子邮件的字段，这正是我们想要的。之后，我们需要找到从 jQuery的元素选择中的DOM div和插入用户的电子邮件在里面。 。例如下找到
VAR USEREMAIL =回复[0] .User.email; //从JSON中查找电子邮件
var emailDiv = $（div＃email）; //使用jQuery选择器找到电子邮件的div
emailDiv.text（userEmail）; //将用户的电子邮件作为文本放入该div
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".
I am able to receive the data using
alert(JSON.stringify(response));but I want to add this _email_id_ information to
<div id="email">Email_id< /div >which is defined in index.html.
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)).
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"; }My PhoneGap application code is in 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>DataBase: demo, user: root, password: 1234, table: registration
Screen shot of my phone:
解决方案So if I understood you correctly, what you want to do is to get the
email_idfrom the response and put the content into thedivcalled email.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屋！
