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

问题

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:

回答1:

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.

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

来源：https://stackoverflow.com/questions/27731448/how-to-write-jsondata-to-the-html-element-in-phonegap-application

标签

php

android

json

cordova