标签 Javascript 下的文章

2024-08-20

CSS2DRenderer是Three.js中用于渲染2D标签的一个工具，它允许你在3D场景中添加2D CSS样式的标签。以下是一个简单的例子，展示如何使用CSS2DRenderer标注Three.js场景中的一个物体：




import * as THREE from 'three';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
// 创建场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建CSS2DRenderer
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
 
// 创建一个物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建CSS2DObject标签
const label = document.createElement('div');
label.style.color = 'white';
label.innerHTML = 'Hello, Three.js!';
const labelObject = new CSS2DObject(label);
labelObject.position.set(0, 1, 0); // 放置在物体正上方
scene.add(labelObject);
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
 
  renderer.render(scene, camera);
  labelRenderer.render(scene, camera);
}
 
animate();

这段代码创建了一个Three.js场景，添加了一个立方体和一个2D标签，标签会随着立方体的移动而移动。CSS2DRenderer用于渲染HTML元素，使得我们可以给物体添加复杂的CSS样式。这是一个Three.js中实现2D标注的简单例子。

- 阅读更多 -

Web开发：一个可拖拽的模态框（HTML、CSS、JavaScript）

System

2024-08-20

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Modal</title>
<style>
  .modal {
    width: 300px;
    position: absolute;
    top: 50px;
    left: 50px;
    border: 1px solid #000;
    padding: 10px;
    z-index: 10;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  .modal-header {
    cursor: move;
    background-color: #2196F3;
    color: white;
    padding: 10px;
    margin: -10px -10px 10px -10px;
  }
  .modal-content {
    padding: 20px;
  }
</style>
</head>
<body>
 
<div class="modal" id="modal">
  <div class="modal-header" id="modal-header">
    Drag Me!
  </div>
  <div class="modal-content">
    <p>This is a draggable modal window.</p>
  </div>
</div>
 
<script>
  const dragModal = (modal, header) => {
    header.onmousedown = dragStart;
 
    let dragging = false;
    let mouseX, mouseY, deltaX, deltaY;
 
    const dragStart = (e) => {
      dragging = true;
      mouseX = e.clientX;
      mouseY = e.clientY;
    };
 
    document.onmouseup = () => {
      dragging = false;
    };
 
    document.onmousemove = (e) => {
      if (dragging) {
        deltaX = e.clientX - mouseX;
        deltaY = e.clientY - mouseY;
        mouseX = e.clientX;
        mouseY = e.clientY;
 
        modal.style.left = (modal.offsetLeft + deltaX) + 'px';
        modal.style.top = (modal.offsetTop + deltaY) + 'px';
      }
    };
  };
 
  const modal = document.getElementById('modal');
  const header = document.getElementById('modal-header');
  dragModal(modal, header);
</script>
 
</body>
</html>

这段代码实现了一个可拖拽的模态框。用户可以点击模态框的标题栏并拖动它来移动整个模态框。代码中的dragModal函数负责处理拖拽逻辑，它设置了必要的事件监听器来响应鼠标的移动和释放事件。

- 阅读更多 -

原生ajax_axios框架_json传输字符串

System

2024-08-20

所有,ajax

在JavaScript中，使用原生的XMLHttpRequest进行AJAX请求，以及使用axios库进行相同操作的示例代码如下：

原生AJAX使用`XMLHttpRequest`




var xhr = new XMLHttpRequest();
xhr.open("POST", "your_api_url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);
    console.log(json);
  }
};
var data = JSON.stringify({ key: "value" });
xhr.send(data);

使用axios库

首先，确保已经安装axios：




npm install axios

然后，使用axios发送POST请求：




const axios = require('axios');
 
axios.post('your_api_url', { key: "value" })
     .then(response => {
         console.log(response.data);
     })
     .catch(error => {
         console.error(error);
     });

在这两种情况下，我们都是向服务器发送了一个JSON格式的字符串，并在收到服务器的响应时打印出来。注意，服务器端需要接收JSON格式的数据，并返回JSON格式的响应。

- 阅读更多 -

创建Asp.net MVC项目Ajax实现视图页面数据与后端Json传值显示

System

2024-08-20

所有,ajax

以下是一个简单的Asp.net MVC项目中使用Ajax来传递Json数据并在视图页面显示的示例。

创建一个MVC项目（如果还没有）。
添加一个模型类（如果还没有）。
在控制器中添加一个Action方法来返回Json数据。
在视图中使用Ajax调用该Action方法，并显示返回的Json数据。

模型类示例（Models/DataModel.cs）:




public class DataModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

控制器示例（Controllers/HomeController.cs）:




public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    public ActionResult GetData()
    {
        // 示例数据，实际项目中应从数据库获取
        var data = new List<DataModel>
        {
            new DataModel { Id = 1, Name = "Alice" },
            new DataModel { Id = 2, Name = "Bob" }
        };
 
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

视图示例（Views/Home/Index.cshtml）:




@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="data-container">
        <!-- 数据将显示在这里 -->
    </div>
 
    <script type="text/javascript">
        $(document).ready(function () {
            fetchData();
        });
 
        function fetchData() {
            $.ajax({
                url: '@Url.Action("GetData", "Home")',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    var html = '';
                    $.each(data, function (key, value) {
                        html += '<p>ID: ' + value.Id + ', Name: ' + value.Name + '</p>';
                    });
                    $('#data-container').html(html);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error fetching data: ' + textStatus);
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，我们使用了jQuery的$.ajax()方法来异步获取后端的HomeController中的GetData Action方法返回的Json数据，并在成功获取数据后，使用JavaScript动态地将数据插入到页面的<div id="data-container">元素中。这样就实现了Ajax的数据传递和页面的动态更新。

- 阅读更多 -

解决jQuery JS的for循环调用ajax异步问题

System

2024-08-20

所有,ajax




// 假设我们有一个数组，包含了需要发送的数据
var dataArray = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    // ... 更多数据
];
 
// 使用jQuery发送AJAX请求的函数
function sendAjaxRequest(data, callback) {
    $.ajax({
        url: '/your/api/endpoint', // 替换为你的API端点
        type: 'POST',
        data: data,
        success: function(response) {
            callback(null, response);
        },
        error: function(error) {
            callback(error, null);
        }
    });
}
 
// 使用async.eachLimit来控制并发数量
// 需要安装async模块，可以通过npm install async来安装
var async = require('async');
 
async.eachLimit(dataArray, 5, function(item, callback) {
    sendAjaxRequest(item, callback);
}, function(err) {
    if (err) {
        console.error('An error occurred:', err);
    } else {
        console.log('All requests completed successfully.');
    }
});

在这个代码示例中，我们使用了async.eachLimit函数来控制并发执行的AJAX请求数量，这样可以避免因大量并发请求而导致的问题。我们假设你已经安装了async模块，并在你的环境中可用。如果你的环境不支持async模块，你需要先通过npm安装它：npm install async。

- 阅读更多 -

Three.js--》探秘虚拟现实VR展厅的视觉盛宴

System

2024-08-20

所有,javascript




// 引入Three.js库
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 设置相机位置并指向场景中心
camera.position.z = 5;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate();

这段代码展示了如何使用Three.js创建一个简单的3D场景，包括一个旋转的立方体。这是虚拟现实VR展厅可视化的一个基础例子，展示了如何将Web技术应用于创建吸引人的虚拟现实体验。

- 阅读更多 -

什么是AJAX？如何使用原生JavaScript进行AJAX请求？

System

2024-08-20

所有,ajax

AJAX，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的技术。它允许浏览器与服务器进行数据交换而无需刷新页面。

以下是使用原生JavaScript进行AJAX请求的示例代码：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

在这段代码中，我们首先创建了一个新的XMLHttpRequest对象，然后使用open方法设置请求的类型、URL 以及是否异步处理（设为true以进行异步请求）。接着，我们定义了onreadystatechange事件处理函数来监听请求的不同状态变化。最后，我们调用send方法发送请求。

请注意，根据你的实际API端点和需求，你可能需要对请求方法（如GET、POST）、URL、是否发送数据以及响应类型进行相应的调整。

System

2024-08-20

所有,ajax

在前端与后端交互中，Ajax和Axios是常用的两种方法。Ajax是基于JavaScript的一种技术，而Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境。

使用Ajax发送请求




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'http://example.com/api/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('There was a problem with the request.');
    }
  }
};
 
// 发送请求
xhr.send();

使用Axios发送请求




// GET请求
axios.get('http://example.com/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// POST请求
axios.post('http://example.com/api/data', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在实际开发中，Axios更加方便和强大，因为它基于Promise，可以让我们使用链式调用，而且在Node.js环境中也可以使用。

注意：在使用Ajax和Axios发送请求时，需要注意跨域问题，如果你的前端和后端不是同源的话，你可能需要配置CORS或者使用代理服务器来解决。

在实际开发中，我们通常会将Ajax和Axios与HTML交互结合起来，以实现动态的数据更新和页面渲染。例如，我们可以在用户输入数据后，使用Ajax/Axios将数据发送到后端，后端处理完毕后再将结果返回到前端页面。

综上所述，Ajax和Axios都是前后端交互的好方法，你可以根据实际需求和项目要求选择合适的方法。

- 阅读更多 -

111 ajax获取数据jsrender显示数据

System

2024-08-20

所有,ajax

要使用jQuery的ajax方法获取数据，并使用jsRender模板引擎显示这些数据，你可以按照以下步骤操作：

准备一个HTML模板，其中包含用于显示数据的模板标签。
使用jQuery的$.ajax()方法获取数据。
定义一个jsRender模板，并将获取到的数据渲染到HTML模板中。

以下是一个简单的示例：

HTML:




<div id="data-container"></div>
<script id="myTemplate" type="text/x-jsrender">
    <h2>{{:name}}</h2>
    <p>{{:description}}</p>
</script>

JavaScript:




$.ajax({
    url: "your-data-source.json", // 替换为你的数据源URL
    method: "GET",
    dataType: "json"
}).done(function(data) {
    var template = $("#myTemplate").html();
    var htmlOutput = jsrender.render(template, data);
    $("#data-container").html(htmlOutput);
}).fail(function(error) {
    console.log("Error fetching data: ", error);
});

确保在你的页面中引入了jQuery和jsRender库。

这段代码会在成功获取数据后，使用#myTemplate中定义的模板来渲染数据，并将渲染后的HTML内容放入#data-container元素中。

- 阅读更多 -

JavaEE开发之servlet+jsp+tomcat

System

2024-08-20

所有,ajax

以下是一个简单的Java EE开发示例，使用Servlet和JSP结合Tomcat进行Web应用开发。

首先，确保你的开发环境中已经安装了Tomcat服务器和相应的Java Development Kit (JDK)。

创建一个简单的Servlet：




import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
 
public class HelloWorldServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
            response.setContentType("text/html");
            PrintWriter out = response.getWriter();
            out.println("<html><body><h1>Hello World</h1></body></html>");
    }
}

编译这个Servlet并将生成的.class文件放入Tomcat的webapps/你的应用名/WEB-INF/classes目录下，与包的结构对应。
创建一个JSP文件：

在webapps/你的应用名/WEB-INF/jsp目录下创建一个hello.jsp文件，内容如下：




<html>
<body>
    <h1>Hello, <%= request.getParameter("name") %></h1>
</body>
</html>

创建一个Servlet来处理请求并转发到JSP页面：




public class GreetingServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
            String name = request.getParameter("name");
            request.setAttribute("name", name);
            RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/hello.jsp");
            dispatcher.forward(request, response);
    }
}

在web.xml中配置Servlet：




<web-app>
    <servlet>
        <servlet-name>hello</servlet-name>
        <servlet-class>HelloWorldServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>hello</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
 
    <servlet>
        <servlet-name>greeting</servlet-name>
        <servlet-class>GreetingServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>greeting</servlet-name>
        <url-pattern>/greeting</url-pattern>
    </servlet-mapping>
</web-app>

启动Tomcat服务器，并通过浏览器访问Servlet，例如：http://localhost:8080/你的应用名/hello 或 http://localhost:8080/你的应用名/greeting?name=World。

这个简单的例子展示了如何使用Servlet和JSP创建一个基本的Web应用。在实际开发中，你可能需要使用框架（如Spring MVC）来简化开发过程，但理解基本的原理仍然是必要的。

- 阅读更多 -

原生AJAX使用XMLHttpRequest

使用axios库

原生AJAX使用`XMLHttpRequest`