开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在div上单击时在EJS中显示JSON对象

，可以通过以下步骤实现：

首先，在前端开发中，使用HTML和JavaScript创建一个包含div元素的页面。例如，可以创建一个名为index.html的文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Display JSON Object on Click</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">Click me</div>

  <script>
    // 定义一个JSON对象
    var myObject = {
      name: "John Doe",
      age: 30,
      email: "johndoe@example.com"
    };

    // 在div上注册点击事件
    $("#myDiv").click(function() {
      // 将JSON对象转换为字符串
      var jsonString = JSON.stringify(myObject);
      // 在EJS中显示JSON对象
      alert('<%= JSON.stringify(myObject) %>');
    });
  </script>
</body>
</html>

接下来，使用EJS模板引擎来渲染该页面并显示JSON对象。在后端开发中，可以使用Node.js和Express框架来实现。首先，确保已经安装了Node.js和Express。然后，创建一个名为app.js的文件，并添加以下代码：

const express = require('express');
const app = express();
const ejs = require('ejs');

app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  res.render('index');
});

app.listen(3000, function() {
  console.log('Server started on port 3000');
});

在与app.js相同的目录下创建一个views文件夹，并在其中创建一个名为index.ejs的文件。在index.ejs中，使用EJS模板语法来显示页面内容。添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Display JSON Object on Click</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">Click me</div>

  <script>
    // 定义一个JSON对象
    var myObject = {
      name: "John Doe",
      age: 30,
      email: "johndoe@example.com"
    };

    // 在div上注册点击事件
    $("#myDiv").click(function() {
      // 将JSON对象转换为字符串
      var jsonString = JSON.stringify(myObject);
      // 在EJS中显示JSON对象
      alert('<%= JSON.stringify(myObject) %>');
    });
  </script>
</body>
</html>

最后，在命令行中运行node app.js启动服务器。然后，在浏览器中访问http://localhost:3000，单击div元素时，将在EJS中显示JSON对象。

这样，当在div上单击时，将在EJS中显示JSON对象。请注意，以上示例中使用了jQuery库来简化DOM操作，确保在HTML页面中引入了jQuery库。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

使用express框架开发，如何在ejs文件中导入外部的js、css文件

首先看一下这篇文章： https://blog.csdn.net/MPFLY/article/details/78134980

00

Node.js基于Express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js bootstrap express 以及数据库的操作：使用mongoose对象模型来操作 mongodb

01

一步一步学Vue（八）

本篇完成如下场景： 1、系统包含首页、客户信息查询、登录三个模块 2、默认进入系统首页，如果要进行用户查询，则需要进行登录授权 3、查询用户后点击列表项，则进入详情页面基于上述场景需求描述，在客户端我们考虑，需要设计如下组件：Home组件、客户列表组件、客户详情组件、登录组件在服务器端考虑需要：用户认证服务；客户列表查询服务、客户详情查询服务。 ok，现在我们从上往下,先创建我们的基本目录结构，当前目录结构如下： app.js node web 启动文件 node_modules node模块文件（关

02

前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

AngularJS功能最基本的组件之一是服务(Service)。服务为你的应用提供基于任务的功能。服务可以被视为重复使用的执行一个或多个相关任务的代码块。

03

前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

一、服务 AngularJS功能最基本的组件之一是服务(Service)。服务为你的应用提供基于任务的功能。服务可以被视为重复使用的执行一个或多个相关任务的代码块。 AngularJS服务是单例对象，

05

Nodejs学习笔记（五）--- Express安装入门与模版引擎ejs

前言　　前面也学习了一些Node.js的基本入门知道，现在开始进入Web开发的部分；　　Node.js提供了http模块，这个模块中提供了一些底层接口，可以直接使用，但是直接开发网站那还是太累了，所以http模块也不单讲了，可以去看官方API：http://nodejs.org/api/http.html 　　下面我们直接从Express框架着手去进行Web开发，它实现好了更高层的接口，让Web开发更简单快捷... 简介和安装　　Express是一个轻量级、简洁、易用的Node.js Web MVC

Django之json、Ajax简介及实例介绍

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。

02

前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

摘要总结：本文介绍了如何使用AngularJS04进行图书信息管理系统开发。主要包括了图书信息录入、查询、修改和删除等功能。同时，还提供了编辑图书和删除图书的接口。通过使用AngularJS04的指令和指令模块，可以方便地实现图书信息管理系统。

06

前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

摘要总结：本文介绍了如何使用AngularJS04进行图书管理系统开发。主要包括了前端页面的展示和后端逻辑处理。前端页面包括图书信息展示、图书搜索、图书编辑和删除等功能。后端处理包括图书信息的增删改查、用户管理和权限控制等功能。

07

Nodejs开发框架Express3.0开发手记–从零开始

转载请注明出处： http://blog.fens.me/nodejs-express3/ 程序代码已经上传到github有需要的同学，自行下载。 https://github.com/bsspi

一步一步学Vue（九）

接上篇，这次是真的接上篇，针对上篇未完成的部分，增加鉴权功能，开始之前，我们先要介绍一个新的知识，路由元数据。在vue-router中，定义元数据的方式： const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar,

04

Node.js开发Web后台服务

09

Nodejs学习笔记（七）--- Node.js + Express 构建网站简单示例

前言　　上一篇学习了一些构建网站会用到的一些知识点 https://cloud.tencent.com/developer/article/1020636 　　这一篇主要结合前面讲到的知识，去构建一个较为完整的网站应用程序，对前面学到的一些知道做一个串联加深并灵活运用! 　　功能主要用MySQL数据库，包括登录、注册、主页三部分；下面就一步步开始吧！新建项目、建立数据库以及其它准备工作 1.新建express + ejs 项目：sampleEjs cd 工作目录 express -e sampleEj

08

EJS模板在express中的使用攻略及应用实例（建议收藏）

ejs当中的"E" 代表 "effective"，即【高效】。EJS 是一套非常简单的模板语言，可以帮你利用普通的 JavaScript 代码快速生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

02

Django---Ajax

Ajax准备知识：json 什么是json？定义： JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。讲json对象，不得不提到JS对象： 📷 合格的json对象：

第168天：json对象和字符串的相互转换

在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。 JSON.stringify(obj) 将JSON对象转为字符串。 JSON.parse(string) 将字符串转为JSON对象格式。

01

原荐自己写JSON编辑器

作者：汪娇娇时间：2018年1月15日下一篇：自己写代码对比工具时间过得好快，一下子就2018年了，想起好久没写博客，不觉有些浪费了时光，今天便来补一篇。 JSON是个伟大的东西，各处都用得到，既方便也纠结。用的溜的人那就没啥说的了，但也有用的不溜的或者想偷懒的人，那JSON也算是一个小小的槛吧。怎么说呢，就比如说有的人到现在连JSON的正确格式都写不对，也有人写对了但并没有自信自己是否写对，那这时候就需要一个校验工具来检验JSON格式的正确性。既然有了校验，那格式化工具怎么能少，再随着需求的增加，我

08

全民刷军装背后的AI技术及简单实现

昨天有Design-AI-Lab用户后台留言，问为什么换军装的h5这么火，但没见到有技术文章分析如何实现。我回复说，大概是比较简单吧，主要工作是图像合成。后来，我亲自体验了下，反应速度比较慢，大概是因为火了吧，访问者太多；关键的技术是人脸识别；前端的话，canvas实现图像合成；整个h5设计不算惊艳，只能算一般；运营亮点是抓住热点事件，设计了激发用户分享的产品。再细想一想，决定还是自己动手实现一个，试试整个技术的难度。于是，通过开发者工具，阅读了 http://www.h5case

Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

前言　　前面一有写到一篇Node.js+Express构建网站简单示例https://cloud.tencent.com/developer/article/1020656 　　这篇还是用以前的例子，用Node.js+Koa2构建　　Koa: https://github.com/koajs/koa http://koa.bootcss.com (中文) 　　Koa就不多介绍了，前面也写过Express，同一个团队打造，前面也过express文章，对比着看，自然可以看出些优点！搭

09

AJAX

先了解JSON 什么是JSON？ JSON 指的是JavaScript对象表示法（JavaScript Object Notation） JSON 是轻量级的文本数据交换格式 JSON 独立于语言 JSON 具有自我描述性，更易理解　　JSON 使用JavaScript语法来描述数据对象，但是JSON仍然独立与语言和平台。JSON解释器和JSON库支持许多不同的编程语言。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次

07

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭