如何將JSON數據寫入phonegap應用程序中的html元素？

我想使用PhoneGap應用程序接收JSON數據。我正在使用服務器xampp php服務器。在此服務器上，我有用於從數據庫接收數據的服務器代碼api.php。我的筆記本電腦的IP地址是192.168.1.4 所以這本地服務器的URL是HTTP：//192.168.1.4/Experiements/webservices/api.php」如何將JSON數據寫入phonegap應用程序中的html元素？

我能夠接收數據使用

alert(JSON.stringify(response));

，但我想這_email_id_信息添加到

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

這是在 指數定義

.html。

從我的Android手機我想只是登錄，並收到該用戶的email_id。請使用警報（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>

數據庫：演示，用戶：根，密碼：，表格：註冊我的手機的 enter image description here

屏幕截圖：

enter image description here

來源

2015-01-01 geeks

上面的代碼運行的代碼，我根據SANFOR感謝@sanfor修改， – geeks

所以，如果我理解正確的，你想要做的是讓從響應email_id和將內容放入div，名爲電子郵件地址爲。

您需要做的是首先從您的案例陣列的JSON對象中獲取用戶的電子郵件，僅包含一個項目。這第一個數組再次是對象它包含字段調用電子郵件這正是我們想要的。之後，我們需要從DOM中找到與jQuery element selector的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

來源

2015-01-01 15:16:31

感謝您的重播，我請根據你的代碼，但它無法正常工作。 – geeks

@neelabhsingh：對不起，我有。而不是中間的＃號。現在修復它。 –

你是偉大的，它的工作原理，謝謝 – geeks

如何將JSON數據寫入phonegap應用程序中的html元素？

回答

相關問題