Electron开发报错：$.ajax is not a function及相关问题求助

1. 修复主进程中$.ajax未定义的问题 #

主进程属于Node.js环境，不适合使用jQuery（jQuery依赖浏览器DOM及XMLHttpRequest对象）。你需要改用Node.js原生HTTP模块或支持Node环境的HTTP客户端（如axios）：

步骤： #

• 安装axios（如果选择使用）：

npm install axios

• 修改main.js，替换jQuery的AJAX请求：

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const axios = require('axios') // 替换jQuery为axios

let text
let win

const createWindow = () => {
    win = new BrowserWindow({
        // 保留你的窗口配置
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: false, // 建议关闭，提升安全性
            contextIsolation: true // 默认开启，确保上下文隔离
        }
    })

    win.loadFile('index.html');
    // 注意：text初始值为undefined，建议先赋值再发送
    win.webContents.send("showText", text || "初始文本");

    ipcMain.on("receiveData", async (event, formData) => {
        try {
            const response = await axios({
                method: 'POST', // 或你的请求方法
                url: '你的API地址',
                data: formData
            });
            // 请求成功后，将结果发送给渲染进程
            win.webContents.send("showText", response.data);
        } catch (error) {
            console.error('API请求失败:', error);
            win.webContents.send("showText", `请求失败: ${error.message}`);
        }
    });
}

app.whenReady().then(createWindow)

2. 修复contextBridge暴露API的冲突问题 #

错误提示Cannot bind an API on top of an existing property on the window object，说明window.bridge已被其他脚本定义，需更换暴露的名称：

修改preload.js： #

const { contextBridge, ipcRenderer } = require('electron')

const electronApi = {
    postData: (formData) => ipcRenderer.send("receiveData", formData),
    showText: (callback) => {
        // 监听主进程的showText事件，将结果传递给渲染进程的回调
        ipcRenderer.on("showText", (event, text) => callback(text));
    }
}

// 更换为唯一名称，避免冲突
contextBridge.exposeInMainWorld("electronApi", electronApi)

3. 渲染进程代码调整 #

确保渲染进程中正确使用暴露的API，且jQuery正常加载：

步骤： #

• 在index.html中通过script标签引入完整版本的jQuery（不要通过require，渲染进程是浏览器环境）：

<!-- 在index.html的<head>或<body>末尾添加 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="./renderer.js"></script>

• 修改renderer.js：

$("#submit").on("click", function () {
    const formData = { /* 收集你的表单数据 */ };
    window.electronApi.postData(formData);
});

window.electronApi.showText((text) => {
    $("#result").append(text);
});

额外说明 #

• 渲染进程本身是浏览器环境，不需要Node.js权限即可使用jQuery AJAX。如果之前尝试在渲染进程用AJAX失败，大概率是因为开启了nodeIntegration导致jQuery的浏览器环境被污染，关闭nodeIntegration并通过script标签引入jQuery即可正常使用。
• 保持contextIsolation: true是Electron的安全最佳实践，避免渲染进程直接访问Node.js API，通过预加载脚本的contextBridge进行安全的进程间通信。

内容的提问来源于stack exchange，提问作者Ülephaze