如何将 JSONdata 写入 phonegap 应用程序中的 html 元素？

Question

我正在尝试使用 PhoneGap 应用程序接收 JSON 数据。我正在使用服务器 xampp php 服务器。在这台服务器上，我有服务器代码 api.php 用于从数据库接收数据。我笔记本电脑的 IP 地址是 192.168.1.4 所以这个 local server 的 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 phone 我只想登录并接收该用户 的 email_id。请查看我的数据库的图像以及在我的 phone 上接收的数据使用警报（JSON.stringify（响应））。

我的服务器代码是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>

数据库：demo，用户：root，密码：1234，table: 注册

我的 phone 的屏幕截图：

Answer 1

所以如果我理解正确的话，你要做的是从响应中获取 email_id 并将内容放入名为 email[=22 的 div =].

您需要做的是首先从 JSON 对象获取用户的电子邮件，在您的情况下 Array 只有一个项目。数组的第一项也是 Object，它包含名为 email 的字段，这正是我们想要的。之后，我们需要使用 jQuery element selector 从 DOM 中找到 div 并将用户的电子邮件插入其中。示例如下。

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 元素？

How to write JSONdata to the html element in phonegap application?

php

android

json

cordova