为什么 AJAX GET 请求只工作一次？答案

【问题标题】：Why is AJAX GET request only working once?为什么 AJAX GET 请求只工作一次？
【发布时间】：2020-04-14 02:35:35
【问题描述】：

我正在尝试运行一个脚本来切换 WebApp 上的一些电插头，它运行良好，但问题是它只能运行一次，我不知道为什么。我还认识到，一旦我调用该函数，就会有一个 XHR 请求永远进行而没有收到响应。

这是我的节点 JS 服务器和我的 Web 应用程序上的功能：

 function ajaxChangePlug(num,state) {
                $.ajax({
                    url: `/api/${num}/${state}`,
                    type: "GET",
                    data: { 
                        state: state,
                        num: num
                    },
                    dataType: "json",
                })
            };

        function handle1(num,state){
                ajaxChangePlug(num,state);
                if (state === "on") {
                    document.getElementById("1").setAttribute( "onClick", `handle1(${num},'off')`);
                    document.getElementById("1").src=`/resources/${num}_on.png`
                } else {
                    document.getElementById("1").setAttribute( "onClick", `handle1(${num},'on')`);
                    document.getElementById("1").src=`/resources/${num}.png`
                }    
            };

server.get('/api/:num/:state', (req, res) => {
    var state = req.params.state;
    var num = req.params.num;
    if(state === 'on'){
        shell.exec(`/home/pi/mynode/${num}${state}_on.sh`);

    }else{
        shell.exec(`/home/pi/mynode/${num}${state}_off.sh`);        
    }
});

【问题讨论】：

可能是缓存问题，但我想您在发布之前首先查看了是否有错误消息，并且您认为我们不得不猜测？
也许你应该在服务器端代码中响应
最后我也尝试了 res.send() ，但没有成功，根本没有错误消息，就像服务器处于没有结束的循环中一样。
你怎么打电话给ajaxChangePlug，当你得到回复时你会怎么做？具体来说，您是否覆盖了您的 html 并需要事件委托？
所以我添加了 ajaxChangePlug 的调用作为上面的编辑。我并没有真正对响应做出反应，但我会根据状态（开/关）更改 HTML，但我并没有真正看到那里有问题。

标签： javascript jquery node.js xmlhttprequest

【解决方案1】：

您应该像这样在前端等待响应：

$.ajax({
url: `/api/${num}/${state}`,
type: "GET",
data: {
	state: state,
	num: num
},
dataType: "json",
success: function (data) {
	if (data.state === "on") {
		document.getElementById("1").setAttribute("onClick", `handle1(${num},'off')`);
		document.getElementById("1").src = `/resources/${num}_on.png`
	} else {
		document.getElementById("1").setAttribute("onClick", `handle1(${num},'on')`);
		document.getElementById("1").src = `/resources/${num}.png`
	}
}
})

在您的后端，您应该像这样发送响应：

server.get('/api/:num/:state', (req, res) => {
	var state = req.params.state;
	var num = req.params.num;
	if (state === 'on') {
		shell.exec(`/home/pi/mynode/${num}${state}_on.sh`);
		res.send('on');
	} else {
		shell.exec(`/home/pi/mynode/${num}${state}_off.sh`);
		res.send('off')
	}
});

【讨论】：