$().each() 与 $.each()区别

本文介绍了使用jQuery进行AJAX请求的基本方法,包括读取XML和JSON数据的具体实现。此外,还提供了处理JSON数据的实例代码,展示了如何解析并显示JSON格式的信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$(items).each(function(){

     //item

})   ,

而后者则

  $.each(items,function(i,item){

//write your code

}) 

 

-----------------jquery   ajax----------------------

jquery 开发ajax 相对来说 是比较简单的  具体情况可以参考 [QLeelulu的ajax系列]

1.ajax 读取 XML

 

复制代码
复制代码
//XMLFile.xml
<?xml version="1.0" encoding="utf-8" ?>
<users>
  <user sex="0">
    <name>abcd1</name>
    <age>12</age>
  </user>
  <user sex="1">
    <name>abcd2</name>
    <age>13</age>
  </user>
</users>
复制代码
复制代码

 

 

复制代码
复制代码
 $(function(){
        
       $(".getData").click(function(){
           
           $.ajax({
              url:"XMLFile.xml",
              success:function(data)
                       {
                         $(data).find("user").each(function(){
                         
                         alert($(this).attr("sex"));//获取属性
                         alert($(this).children("age").text());//获取item 中的 age 
                       })
                        },
             beforeSend:function(){
               $(".loading").html("数据加载中 .");
                       },
              error:function(){
              
              },
              golable:false,
              
              datatype:"xml",
              complete:function()
              {
                  $(".loading").html("");
                    $(".loading").html("数据加载完成 ");
              }
           })
            
       });
    })
复制代码
复制代码

 

2.  jquery 读取 json

   json 格式:

 

复制代码
复制代码
 /*
        [
          {'UserID':11, 'Name':'rddy', 'Email':'zhuleiprohotmail.com'},
          {'UserID':12, 'Name':'Tfddly', 'Email':'jjjail.com'},
          {'UserID':351, 'Name':'Truly', 'Email':'zhulm'}
         ]
        */
        
          $.ajax({
              url:"index.aspx",
              success:function(json)
                       {
               json=eval("("+json+")");//将数据转成json格式
                 
                       $.each(json,function(i,item){
       
              document.write("UserID"+String(item.userID)+"   Name:"+item.Name+"   Email:"+item.Email+"<br/>");
        });
    
                         
                        },
              beforeSend:function(){
             
                       },
              error:function(){
              
              },
              golable:false,
              datatype:"json",
              complete:function()
              {
                
              }
           })
复制代码
复制代码

 

 

 

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
  this; // the options for this ajax request
}
cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
function (XMLHttpRequest, textStatus) {
  this; // the options for this ajax request
}
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
  // 通常情况下textStatus和errorThown只有其中一个有值 
  this; // the options for this ajax request
}
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

 

 -------------------------JSON数据获取---------------------

复制代码

    window.onload=function(){
         getJSON();//获取多组数据
         getData();//获取单组数据
      }
      
      function getJSON()
      {
        var json="[{'UserID':11, 'Name':'rddy', 'Email':'zhuleiprohotmail.com'},{'UserID':12, 'Name':'Tfddly', 'Email':'jjjail.com'},{'UserID':351, 'Name':'Truly', 'Email':'zhulm'}]";
        json=eval("("+josn+")");//将字符串转换成josn格式
        
        $.each(json,function(i,item){
        
              document.writeln("UserID"+String(item.userID)+"   Name:"+item.Name+"   Email:"+item.Email+"<br/>");
        });
      }
      
      function getData()
      {
          var json="{'userID':12,'name':['rhythm','rhythmk']}";
          json=eval("("+json+")");
          document.write(json.name[1]);//rhythmk
          document.write(json.name);//rhythm,rhythmk
      }
<think>我们注意到用户的问题是关于在Thymeleaf模板中使用jQuery的`$.each`方法遍历数据并展示。虽然Thymeleaf本身提供了`th:each`进行遍历,但有时我们可能需要在客户端使用JavaScript(特别是jQuery)来动态处理数据。以下是如何在Thymeleaf中结合使用`$.each`进行数据遍历的步骤: ### 1. 后端准备数据 首先,后端需要将数据作为模型属性传递给Thymeleaf模板。例如,我们传递一个用户列表: ```java @Controller public class UserController { @GetMapping("/users") public String getUsers(Model model) { List<User> userList = Arrays.asList( new User(1, "Alice", "123456", "Beijing"), new User(2, "Bob", "654321", "Shanghai") ); model.addAttribute("users", userList); return "users"; } } ``` ### 2. 前端使用Thymeleaf和jQuery 在Thymeleaf模板中,我们可以使用以下两种方式之一来使用`$.each`遍历数据: #### 方式一:将数据作为JavaScript变量 使用Thymeleaf的内联表达式将服务器端的数据转换为JavaScript变量,然后使用`$.each`遍历。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="user-list"></div> <script th:inline="javascript"> /*<![CDATA[*/ $(function() { // 使用Thymeleaf内联获取数据 var users = /*[[${users}]]*/ []; // 使用jQuery的$.each遍历 $.each(users, function(index, user) { var userHtml = '<div>' + '<span>' + user.id + '</span> ' + '<span>' + user.name + '</span> ' + '<span>' + user.phone + '</span> ' + '<span>' + user.address + '</span>' + '</div>'; $('#user-list').append(userHtml); }); }); /*]]>*/ </script> </body> </html> ``` #### 方式二:从隐藏域中获取数据 如果数据量较大或者需要避免在JavaScript代码中直接暴露数据结构,可以将数据放入隐藏域,然后使用jQuery获取并解析。 ```html <body> <!-- 将数据存储在隐藏域中,使用Thymeleaf的th:attr设置value --> <input type="hidden" id="users-data" th:value="${#strings.escapeJava(#strings.toString(users))}" /> <div id="user-list"></div> <script> $(function() { // 从隐藏域获取数据字符串 var usersJson = $('#users-data').val(); // 解析为JSON对象 var users = JSON.parse(usersJson); // 使用$.each遍历 $.each(users, function(index, user) { $('#user-list').append( $('<div>').append( $('<span>').text(user.id), $('<span>').text(user.name), $('<span>').text(user.phone), $('<span>').text(user.address) ) ); }); }); </script> </body> ``` ### 3. 注意事项 - **数据转义**:在方式一中,Thymeleaf内联表达式会自动处理一些转义,但要注意如果数据中包含特殊字符(如引号),可能会破坏JavaScript结构。方式二通过隐藏域和`escapeJava`可以更好地处理特殊字符。 - **性能考虑**:如果数据量很大,使用`$.each`遍历可能会影响页面加载性能,建议使用分页或虚拟滚动。 - **Thymeleaf的表达式**:在JavaScript内联中,使用`/*[[${data}]]*/`的语法,其中`/*[[...]]*/`是Thymeleaf的安全内联语法,当模板静态打开时,`/*[[${data}]]*/`后面的空数组`[]`会作为默认值,而在服务器渲染时会被替换。 ### 4. 示例:遍历Map 如果数据是Map类型,也可以使用`$.each`遍历: ```html <script th:inline="javascript"> var userMap = /*[[${userMap}]]*/ {}; $.each(userMap, function(key, value) { console.log(key + ": " + value.name); }); </script> ``` ### 5. 结合Thymeleaf的服务器端渲染和客户端处理 这种方式适用于需要同时利用Thymeleaf的服务器端渲染能力和客户端的动态交互。例如,初始数据由服务器渲染,后续的更新通过Ajax加载并用`$.each`动态添加。 ### 总结 在Thymeleaf模板中使用jQuery的`$.each`遍历数据的关键步骤: 1. 将服务器端的数据通过Thymeleaf内联表达式或隐藏域传递给JavaScript。 2. 在页面加载完成后,使用`$.each`遍历数据并动态生成DOM元素插入页面。 这种方式结合了服务器端模板引擎和客户端脚本的优势,适用于需要动态操作数据的场景[^1][^2][^5]。 --- ### §§相关问题§§ 1. 如何在Thymeleaf中使用Ajax动态加载数据并利用`$.each`展示? 2. Thymeleaf内联表达式处理复杂数据结构(如嵌套对象)时有哪些注意事项? 3. 如何优化Thymeleaf中大数据量的前端渲染性能?</think>在 Thymeleaf 模板中使用 jQuery 的 `$.each()` 方法遍历数据并展示,可以通过以下步骤实现: ### 一、基本实现步骤 #### 1. 后端准备数据 (Spring Boot) ```java @Controller public class UserController { @GetMapping("/users") public String getUsers(Model model) { List<User> userList = Arrays.asList( new User(1, "Alice", "123456", "Beijing"), new User(2, "Bob", "654321", "Shanghai") ); model.addAttribute("users", userList); // 传递用户列表到前端 return "user-page"; } } ``` #### 2. 前端使用 Thymeleaf + jQuery 遍历展示 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- 使用Thymeleaf将数据注入JavaScript --> <script th:inline="javascript"> /*<![CDATA[*/ // 将服务器端数据转换为JavaScript变量 const userData = /*[[${users}]]*/ []; $(document).ready(function() { // 使用jQuery的$.each遍历数据 $.each(userData, function(index, user) { // 创建并添加DOM元素 $("#user-list").append(` <div class="user-item"> <span>ID: ${user.id}</span> <span>Name: ${user.name}</span> <span>Phone: ${user.phone}</span> <span>Address: ${user.address}</span> </div> `); }); }); /*]]>*/ </script> <!-- 展示区域 --> <div id="user-list"></div> </body> </html> ``` ### 二、关键技术解析 1. **数据传递方式**: - 使用 Thymeleaf 的 `th:inline="javascript"` 将服务器数据注入 JavaScript 变量 - `const userData = /*[[${users}]]*/ [];` 语法确保: - 服务器渲染时:注入真实数据 - 静态打开时:使用空数组兜底 [^1] 2. **$.each() 遍历方法**: ```javascript $.each(collection, function(index, item) { // index: 当前索引 // item: 当前数据项 }); ``` 3. **动态创建 DOM 元素**: - 使用 jQuery 的 `append()` 方法动态添加元素 - 使用模板字符串简化 HTML 拼接 ### 三、处理不同数据结构 #### 1. 遍历数组 ```javascript const colors = ["Red", "Green", "Blue"]; $.each(colors, function(i, color) { $("#color-list").append(`<li>${i+1}. ${color}</li>`); }); ``` #### 2. 遍历对象列表 ```javascript $.each(userData, function(i, user) { $("#user-list").append(` <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.phone}</td> </tr> `); }); ``` #### 3. 遍历 Map 对象 ```java // 后端传递Map数据 Map<String, String> settings = new HashMap<>(); settings.put("theme", "dark"); settings.put("language", "zh-CN"); model.addAttribute("appSettings", settings); ``` ```javascript // 前端遍历Map const settings = /*[[${appSettings}]]*/ {}; $.each(settings, function(key, value) { $("#settings").append(`<div>${key}: ${value}</div>`); }); ``` ### 四、结合 Thymeleaf 特性 1. **条件渲染**: ```javascript $.each(userData, function(i, user) { let vipClass = user.vip ? "vip-user" : ""; $("#user-list").append(` <div class="user ${vipClass}"> <!-- 内容 --> </div> `); }); ``` 2. **使用 Thymeleaf 表达式**: ```javascript $.each(userData, function(i, user) { $("#user-list").append(` <a th:href="@{/profile(id=${user.id})}"> View Profile </a> `); }); ``` 3. **处理图片资源**: ```javascript $.each(products, function(i, product) { $("#product-grid").append(` <div class="product"> <img th:src="@{/images/} + ${product.imagePath}" alt="${product.name}"> <h3>${product.name}</h3> </div> `); }); ``` ### 五、性能优化技巧 1. **文档片段优化**: ```javascript // 创建文档片段减少重绘次数 const fragment = document.createDocumentFragment(); $.each(userData, function(i, user) { const div = document.createElement('div'); div.innerHTML = `<span>${user.name}</span>`; fragment.appendChild(div); }); $("#user-list").append(fragment); ``` 2. **分页加载**: ```javascript let currentPage = 1; const pageSize = 10; function loadPage(page) { $.get(`/api/users?page=${page}&size=${pageSize}`, function(data) { $("#user-list").empty(); $.each(data.content, function(i, user) { // 渲染用户项 }); }); } ``` 3. **虚拟滚动**: ```javascript $("#scroll-container").scroll(function() { if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { loadNextPage(); } }); ``` ### 六、常见问题解决 1. **特殊字符转义**: ```javascript $.each(comments, function(i, comment) { const safeText = $("<div>").text(comment.content).html(); $("#comments").append(`<div>${safeText}</div>`); }); ``` 2. **处理空数据**: ```javascript if (userData.length === 0) { $("#user-list").html('<div class="empty">No users found</div>'); } else { $.each(userData, function(i, user) { // 渲染数据 }); } ``` 3. **性能监控**: ```javascript console.time('renderUsers'); $.each(userData, function(i, user) { // 渲染代码 }); console.timeEnd('renderUsers'); // 输出渲染耗时 ``` ### 七、 Thymeleaf th:each 对比 | 特性 | `$.each()` | `th:each` | |------|------------|-----------| | 执行时机 | 客户端渲染 | 服务器端渲染 | | 数据依赖 | 需额外注入JS | 直接访问模型属性 | | SEO友好性 | 较低 | 较高 | | 动态更新 | 支持Ajax更新 | 需刷新页面 | | 初始加载 | 可能闪烁 | 立即显示 | | 复杂度 | 需JS/CSS知识 | 纯HTML模板 | 这种方案适合需要动态交互的场景,如过滤、排序、分页等操作[^2][^5]。对于静态内容展示,使用 Thymeleaf 的 `th:each` 更高效[^1][^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值