delphi 给js传参

在 Delphi 中向 JavaScript 传递参数，通常是在构建 Web 应用程序时使用的技术，尤其是在使用 Delphi 的 WebBroker 或者类似的框架来创建服务器端应用程序时。以下是相关的基础概念、优势、类型、应用场景以及解决方案：

基础概念

Delphi 是一种高级编程语言，主要用于快速应用程序开发（RAD）。JavaScript 是一种广泛用于网页和网络应用的脚本语言。在 Delphi 中向 JavaScript 传递参数通常涉及到服务器端和客户端之间的通信。

优势

动态交互：允许服务器端根据不同的条件动态地向客户端传递数据。
减少重复请求：可以在页面加载时就传递必要的数据，减少客户端的请求次数。
提高用户体验：通过预先加载数据，可以加快页面响应速度，提升用户体验。

类型

内联脚本：直接在 HTML 页面中嵌入 JavaScript 代码，并在其中使用 Delphi 生成的变量。
AJAX 请求：客户端通过 AJAX 向服务器发送请求，服务器端使用 Delphi 处理请求并返回数据。
WebSockets：实现双向通信，Delphi 服务器可以实时向客户端推送数据。

应用场景

动态内容更新：当页面需要根据用户操作或其他条件动态更新内容时。
表单验证：服务器端验证表单数据后，将结果传递给客户端的 JavaScript 进行显示。
实时数据展示：如股票行情、实时聊天等需要实时更新数据的场景。

解决方案

内联脚本示例

在 Delphi 中生成 HTML 页面时，可以直接在页面中嵌入 JavaScript 代码，并使用 Delphi 变量。

var
  MyParam: string;
begin
  MyParam := 'Hello from Delphi!';
  // 生成 HTML 页面
  WriteLn('<html>');
  WriteLn('<head><title>Delphi to JS</title></head>');
  WriteLn('<body>');
  WriteLn('<script type="text/javascript">');
  WriteLn('var myParamFromDelphi = "', MyParam, '";');
  WriteLn('alert(myParamFromDelphi);');
  WriteLn('</script>');
  WriteLn('</body>');
  WriteLn('</html>');
end;

AJAX 请求示例

客户端 JavaScript 发送请求到 Delphi 服务器，服务器处理请求并返回数据。

客户端 JavaScript:

fetch('/get-data')
  .then(response => response.json())
  .then(data => {
    console.log(data.message);
  });

Delphi 服务器端:

procedure TMyHandler.DoGet(Sender: TObject; Request: TRequest; Response: TResponse);
begin
  Response.ContentType := 'application/json';
  Response.Content := '{"message": "Hello from Delphi!"}';
end;

WebSockets 示例

使用 WebSockets 实现实时通信。

Delphi 服务器端:

var
  WebSocket: TWebSocketServer;
begin
  WebSocket := TWebSocketServer.Create(nil);
  try
    WebSocket.Port := 8080;
    WebSocket.OnClientConnected := OnClientConnected;
    WebSocket.Active := True;
  except
    WebSocket.Free;
  end;
end;

procedure TMyHandler.OnClientConnected(Sender: TObject; Client: TWebSocketClient);
begin
  Client.SendText('{"message": "Hello from Delphi!"}');
end;

客户端 JavaScript:

var socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function(event) {
  var data = JSON.parse(event.data);
  console.log(data.message);
};