如何通过AJAX将JS获取的屏幕尺寸经Go后端存入MySQL？

我来帮你一步步排查和解决这三个问题，先梳理下现有代码里的核心问题，再给出修正方案：

一、在new.go中定义屏幕尺寸变量并处理MySQL存储 #

首先你需要在Go代码里接收前端传来的屏幕尺寸参数，然后定义变量存储，再写入MySQL。步骤如下：

1. 定义结构体（或直接用表单值）接收前端数据
2. 处理POST请求，解析参数
3. 建立MySQL连接并执行插入操作

修改后的new.go代码如下：

package main

import (
	"database/sql"
	"html/template"
	"log"
	"net/http"

	_ "github.com/go-sql-driver/mysql"
)

// 定义结构体用于接收前端传来的屏幕尺寸数据
type ScreenData struct {
	Size string `json:"screenSize" form:"screenSize"`
}

// 加载模板
var tmpl = template.Must(template.New("tmpl").ParseFiles("new.html"))

// 首页路由，返回new.html
func indexHandler(w http.ResponseWriter, r *http.Request) {
	if err := tmpl.Execute(w, nil); err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
	}
}

// 处理AJAX请求的路由，接收屏幕尺寸并存入MySQL
func callMeHandler(w http.ResponseWriter, r *http.Request) {
	// 只处理POST请求
	if r.Method != http.MethodPost {
		http.Error(w, "只支持POST请求", http.StatusMethodNotAllowed)
		return
	}

	// 解析表单参数
	if err := r.ParseForm(); err != nil {
		http.Error(w, "参数解析失败", http.StatusBadRequest)
		return
	}

	// 定义屏幕尺寸变量，从表单中获取值
	screenSize := r.FormValue("screenSize")
	if screenSize == "" {
		http.Error(w, "屏幕尺寸参数不能为空", http.StatusBadRequest)
		return
	}

	// 连接MySQL（替换为你的数据库账号、密码和库名）
	db, err := sql.Open("mysql", "root:password@tcp(127.0.0.1:3306)/testdb")
	if err != nil {
		log.Fatal(err)
		http.Error(w, "数据库连接失败", http.StatusInternalServerError)
		return
	}
	defer db.Close()

	// 插入数据到MySQL（需提前创建表：CREATE TABLE screen_info (id INT AUTO_INCREMENT PRIMARY KEY, size VARCHAR(20) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP);）
	_, err = db.Exec("INSERT INTO screen_info (size) VALUES (?)", screenSize)
	if err != nil {
		log.Println("插入数据失败:", err)
		http.Error(w, "数据存储失败", http.StatusInternalServerError)
		return
	}

	// 返回成功响应，把屏幕尺寸回传给前端
	w.Write([]byte("屏幕尺寸已存储：" + screenSize))
}

func main() {
	http.HandleFunc("/", indexHandler)
	http.HandleFunc("/callme", callMeHandler)

	log.Println("服务器启动在 http://localhost:9000")
	log.Fatal(http.ListenAndServe(":9000", nil))
}

二、修改AJAX代码，正确提交屏幕尺寸到后端 #

你的现有AJAX没有把屏幕尺寸数据发送给后端，还存在DOM加载顺序问题（script在head里执行时按钮未渲染，导致事件绑定失败）。修改后的new.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Call Go</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button id="callGo" type="submit">Call Go Code</button>
<div id="response"></div>

<script type="text/javascript">
(function (window) {
	// 获取屏幕尺寸
	var screenSize = '';
	if (screen.width && screen.height) {
		screenSize = screen.width + " x " + screen.height;
	}
	window.jscd = {
		screen: screenSize,
	};
	alert( 'Screen Size: ' + jscd.screen );
}(this));

// 等DOM加载完成后再绑定事件
$(document).ready(function() {
	$("#callGo").on('click', function() {
		$.ajax({
			url: "/callme",  // 用相对路径避免跨域问题
			method: "POST",
			data: { screenSize: jscd.screen },  // 携带屏幕尺寸参数
			success: function(res) {
				// 用后端返回内容更新response容器
				$("#response").html(res);
			},
			error: function(xhr, status, err) {
				// 错误提示，方便调试
				$("#response").html("请求失败：" + err);
				console.log("AJAX错误:", status, err);
			}
		});
	});
});
</script>
</body>
</html>

三、解决response容器不显示内容的问题 #

之前的核心问题有3个：

• DOM加载顺序错误：script在head里执行时按钮未渲染，导致事件绑定失效。现在用$(document).ready()确保DOM加载完成后再绑定事件。
• AJAX未发送参数：之前的请求没有携带屏幕尺寸数据，后端无法处理。现在通过data字段把参数传给后端。
• 回调处理不当：之前直接写入本地数据，未考虑请求失败情况。现在改用后端返回的响应内容，并增加error回调排查问题。

额外注意事项 #

1. 提前创建MySQL表，执行SQL语句：

CREATE TABLE screen_info (
    id INT AUTO_INCREMENT PRIMARY KEY,
    size VARCHAR(20) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. 替换Go代码中MySQL连接字符串的账号、密码和数据库名为你的实际信息。
3. 启动Go服务器后，访问http://localhost:9000测试功能。

内容的提问来源于stack exchange，提问作者Отгонбаяр Лам</think_never_used_51bce0c785ca2f68081bfa7d91973934>