📜  如何使用 jQuery 将 JSON 普遍解析为块?

📅  最后修改于: 2021-11-24 04:50:25             🧑  作者: Mango

在 jQuery 中,将任何数据解析到任何块是通过使用 DOM 插入方法进行的。一些 DOM 插入方法是 append()、appendTo()、html()、prepend()、prependTo()、text()。将 JSON 解析为任何块也以相同的方式处理,但与Ajax 回调函数parse.JSON() 方法一起处理。此处parse.JSON() 方法jQuery 3.0 中已弃用,因此在更高版本中使用JSON.parse()方法。

句法:

/* JSON data might be in array also */
var $json-data= '{json-index:json-values}'

/* Creating object for parsed JSON data */
var $json-object= JSON.parse($jsondata);

/* Parse text along with JSON data-value
 with respect to index */
$("selected block").text($json-object.index);

或者

/* Parse HTML tag along with JSON data-value
 with respect to index */
$("selected block").html( "opentag" + $json-object.index + "closetag");

方法一:

  • 让我们使用 $.ajax() 方法应用 AJAX 回调函数。
  • $.ajax() 方法以不同的方式执行,但在这里我们只是将配置对象/对象字面量作为其唯一参数与 JSON 数组数据一起传递给 $.ajax() 方法。

示例 1:在下面的示例中,AJAX 回调函数用于将 JSON 数组解析为 HTML 块。



  

    
      
    
    

  

    
        

GeeksforGeeeks

        

Top 3 Students List

        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
NAMEROLL NOTOTAL MARK
                                                  
                                                  
                                                  
: Top 3 Students List:
    
          

输出:

方法二:

  • 使用原生 JSON.parse 方法解析 JSON字符串。
  • 使用 JSON.parse 方法代替 jQuery 3.0 不推荐使用的方法 $.parseJSON()。

示例 2:在下面的示例中,jQuery.parseJSON() 方法和 JSON.parse() 方法用于将 JSON 数据解析为 HTML 块。



  

    
    
    
      
    

  

    
        

            GeeksforGeeeks         

        
           
            

Employee Details

            

            

Website Details

                     
    
                      

输出:

参考: https : //api.jquery.com/