網頁

2013年12月17日 星期二

js JSON

jQuery.getJSON and jQuery.parseJSON return [object Object]?

{"ocean":{"name":"North Atlantic Ocean"}}

  ,
 |

function initialize() {


        //http://api.geonames.org/oceanJSON?lat=40.78343&lng=-43.96625&username=demo
          var url = "http://api.geonames.org/oceanJSON";
          var move_add_center_lat = document.getElementById("add_center_lat").innerHTML ;
          var move_add_center_lng = document.getElementById("add_center_lng").innerHTML ;
          var username="XXXX";


          var getData = 'lat='+ move_add_center_lat+"&lng="+move_add_center_lng+"&username="+username; //'lat='+  '49.03' +"&lng="+'10.2';//
          var update_info;

              $.ajax({
               type: "Get",
               url: url,
               data: getData,
               success: function(data){
           
                          //{"ocean":{"name":"East China Sea"}}
                          var obj = $.parseJSON(JSON.stringify(data));
                          document.getElementById("info").innerHTML= obj.ocean.name;//JSON.stringify(jsonString);//json_data[0] ;
                },
                error: function(msg){


                    update_info = document.getElementById('info') ; //顯示點擊座標
                    update_info.innerHTML = "error";

                        
               }

            });

}

North Atlantic Ocean

jQuery AJAX POST Example


js將參數POST到PHP PHP將參數轉成JSON js ajax取得JSON

ajax-post.php
  if(isset($_POST['submit']))
  {
    echo "Data from server: ".json_encode($_POST)."
";
  }
  else
    echo "This is not a POST Request";

json.php


  
  



 
Click the button to display.
function myFunction()
{

      var formData = {name:"Ravi",loc:"India",age:31,submit:true};
      var url ="http://localhost/try/json/ajax-post.php";
          $.ajax(
              {
                  url : url,//"ajax-post.php",
                  type: "POST",
                  data : formData,
                  success: function(data, textStatus, jqXHR)
                  {
                    //data: data from server 
                      document.getElementById("demo").innerHTML= data ;
                       //alert('success');
                  },
                  error: function(jqXHR, textStatus, errorThrown)
                  {
                       for(var key in jqXHR) { //jqXHR = objects
                          var value = jqXHR[key];
                          document.getElementById("demo").innerHTML= jqXHR[key] ;
                      }
                  }
          }).done(function( html ) {
              //document.getElementById("demo").innerHTML= html ;
          });

}

Data from server: {"name":"Ravi","loc":"India","age":"31","submit":"true"}


解JSON





Click the button to display.
name=鼎泰豐,花園夜市,



 PHP取得JSON 傳值給JS處理

'\n' will break your JSON jQuery - WCF service call

特別注意字串要加單引號 json有了換行問題 要跳脫字元處理
 $pageContents = file_get_contents($url, false);
 $place_search_json_result = explode("debug/>",  $pageContents);
 $locations_db_json= $place_search_json_result[1];
 
    
 var jsonString = escapeNewLineChars('<?php echo $locations_db_json; ?>') ; // 注意字串單引
  var json_data = JSON.parse ( jsonString ); 


function escapeNewLineChars(valueToEscape) {
    if (valueToEscape != null && valueToEscape != "") {
        return valueToEscape.replace(/\n/g, "\\n");
    } else {
        return valueToEscape;
    }
}
jQuery JSON

jQuery.getJSON()

webGetJSON.php
error_reporting(E_ALL^E_NOTICE^E_WARNING); //關閉PHP的所有錯誤提示
 header("Content-type: application/json");
  $scenic_id = $_GET['scenic_id'];
  $radius = $_GET['radius'];
 
JSgetJSON.php
 
Click the button to display.
var ScenicAPI = "http://localhost/webGetScenic.php?jsoncallback=";

var jqxhr = $.getJSON( ScenicAPI,   
  {scenic_id: "2",radius: "300"})
  .done(function(json_data) {
   // console.log( "second success" );

     var getNames='name=';
    for (var i = 0; i < json_data.data.length; i++) {  

     getNames += json_data.data[i].name+',';

    }

    document.getElementById("demo").innerHTML= getNames ;
   
  })
  .fail(function() {
     console.log( "error" );
      alert("error");
  })

JSON.stringify 语法讲解

沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。