Javascript | JSON PHP

JSON 代表 Java S cript Object Notation 。它用于交换和存储来自网络服务器的数据。 JSON 使用 JavaScript 的对象表示法。 JavaScript 对象可以被转换成 JSON 并且接收 JSON 格式的文本到 JavaScript 对象中。将 JavaScript 对象转换为 JSON 格式由给定函数完成：

JSON.stringify(object)

将 JSON 格式转换为 JavaScript 对象由给定函数完成：

JSON.parse(string_format)

从服务器交换数据，使用PHP作为服务器语言。 JSON.parse()函数用于从PHP或任何其他服务器获取数据。对于从服务器接收数据的几个 AJAX 语句来检查服务器是否准备好响应来自服务器的数据。如果满足这些条件，则可以接收来自PHP文件的数据。用于从服务器发送和接收数据的协议由下式给出：

XMLHttpRequest()

PHP文件及其客户端 JavaScript：考虑一个PHP文件，其中给出了人的对象以及他的个人数据，例如姓名、性别、年龄。来自PHP对象的数据将被编码为 JSON 格式。给定的文件由极客保存。 PHP

php

name = "Geeks";
$myObj->college="NIT";
$myObj->gender = "Male";
$myObj->age = 30;
  
$myJSON = json_encode($myObj);
  
echo $myJSON;
?>

从PHP文件中，数据通过“echo”发送到 JSON，并且数据将在客户端的 JavaScript 中响应。在PHP文件中 json_encode() 用于将PHP文件中的对象转换为 json 格式。通过客户端 JavaScript 从PHP文件访问数据使用以下脚本：

html

GeeksforGeeks

JSON get data from a PHP file on the server.

 
 
  
Author Name:

 
 
 
College:

 
 
  
Gender:

 
 
  
Age:

 
 
  

  
var xmlhttp = new XMLHttpRequest();
  
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("name").innerHTML = myObj.name;
        document.getElementById("college").innerHTML = myObj.college;
        document.getElementById("gender").innerHTML = myObj.gender;
        document.getElementById("age").innerHTML = myObj.age;
    }
};
xmlhttp.open("GET", "geeks.php", true);
xmlhttp.send();
  

  

输出：

在脚本中JSON.parse(this.responseText)函数用于将数据解析为变量，以便它可以调用该对象的值。 this.response用于从PHP中获取作为字符串打印的数据。在给定的代码中， PHP对象数据是由 JSON 脚本提取的。通过脚本中的 AJAX函数检查数据是否响应，当它响应时数据将被发送并打印在网页中。 xmlhttp.open(“GET”, “geeks.php”, true )函数用于从PHP文件geeks.php 中获取值。 PHP xmlhttp.send()函数用于将值发送到XMLHttpRequest() 。
PHP数组及其客户端 JavaScript：考虑一个包含名称数组的PHP文件。数据被编码到 JSON 中，并将使用“echo”打印出来。

让我们使用客户端 JavaScript 从PHP文件的数组中访问数据。为此，让我们考虑以下 HTML 文件。

html

GeeksforGeeks
JSON get data from PHP file,
                   and converting into JavaScript array.
 
 
 
Second Date of week: 
 
 

 
 
 

var xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("day").innerHTML = myObj[2];
    }
};
xmlhttp.open("GET", "daylist.php", true);
xmlhttp.send();
 

 

 

输出：

在数组中被解析为 JavaScript 中的变量，该值被上面一行初始化的 js 数组调用。
PHP数据库：从数据库中检索数据与从普通PHP文件中获取数据类似。但是要添加几个额外的查询。在这个过程中，首先必须将数据库中的数据提取到PHP文件中，然后 JavaScript 必须将这些数据提取到客户端服务器中。首先使用PHP创建 MySQL 数据库。以下程序用于创建一个表并在其中插入一些数据。

PHP

query($createTable);
     
    $conn->query("insert into geeks values('Geeks')");
    $conn->query("insert into geeks values('gfg')");
    $conn->query("insert into geeks values('g4g')");
     
    $conn->close();
?>

现在，从其他PHP脚本中提取数据。

PHP

query("select names from geeks");
 
    $output = array();
     
    $output = $result->fetch_all(MYSQLI_ASSOC);
    $sresult = json_encode($output);
     
    echo $sresult;
        $conn->close();   
?>

现在让我们在客户端 JavaScript 中收集数据并打印结果。

html

    
        GeeksforGeeks
        
         JSON received the data from the PHP file
        
 
 
         
        
 
 
         
        
        var obj, xmlhttp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("arrayContent").innerHTML =
                          this.responseText;
            }
        };
        xmlhttp.open("GET", "data.php", true);
        xmlhttp.send();
        
    
                   

下面将发送到客户端并以 JSON 结构打印结果，因为它没有将值过滤到每个不同的值中。
输出：

PHP循环：这是数组和上述两个主题（PHP数组及其客户端 JavaScript 和PHP数据库）的组合，并将它们与其中的循环集成在一起。在此 JavaScript 中，将值解析为一个变量，这些值由数组调用，并且在打印每个 myObj 之后，它的值将递增到下一个值。

html

    
        GeeksforGeeks
        
         JSON received the data from the PHP file
        
 
 
         
        
 
 
         
        
        var obj, xmlhttp, myObj, x, txt = "";
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                myObj = JSON.parse(this.responseText);
                for (x in myObj) {
                    txt += myObj[x].names + "<br>";
                }
                document.getElementById("arrayContent").innerHTML = txt;
            }
        };
        xmlhttp.open("GET", "data.php", true);
        xmlhttp.send();
        
    
       

输出：

PHP Method = POST：如果上面的主题已经完全理解，那就很简单了。在以下语法中将发生变化。在 POST 方法中，参数必须通过 send 方法传递，但在 GET 方法中，参数可以在发送PHP文件的请求时传递。
获取方法：

open("GET", file_name?x=argument, asyn, username, password)

POST 方法：

open("POST", file_name, asyn, username, password)

参数由send(argument)方法传递，并从PHP发送请求以访问来自服务器的数据。所以使用函数来获取请求如下：

setRequestHeader("Content-type", "application/x-www-form-urlencoded")

在PHP文件中必须添加一个标题：

header("Content-Type: application/json; charset=UTF-8")

.
下面给出的PHP文件可以使用post 保存。 PHP

PHP

query("select names from ".$obj->table);
 
    $output = array();
     
    $output = $result->fetch_all(MYSQLI_ASSOC);
    $sresult = json_encode($output);
     
    echo $sresult;
?>

在PHP和 html 文件中完成所有这些操作后，它将如下所示：

html

    
        GeeksforGeeks
        geeks table values:
 
 
         
        
 
 
         
        
        var obj, xmlhttp, myObj, x, txt = "";
        obj = JSON.stringify({"table":"geeks"});
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                myObj = JSON.parse(this.responseText);
                for (x in myObj) {
                    txt += myObj[x].names + "<br>";
                }
                document.getElementById("arrayContent").innerHTML = txt;
            }
        };
        xmlhttp.open("POST", "post.php", true);
        xmlhttp.setRequestHeader("Content-type",
                              "application/x-www-form-urlencoded");
        xmlhttp.send("x=" + obj );
         
        
    
                   

输出：