Golang中如何使用Ajax将JavaScript变量存储到MySQL

Golang中如何使用Ajax将JavaScript变量存储到MySQL 我使用JavaScript获取屏幕尺寸，并希望通过AJAX将这些数据存储到MySQL中。但这个方法不起作用。如何在new.go文件中定义屏幕尺寸变量？如何使用AJAX自动将生成的屏幕尺寸信息提交到MySQL？

以下是new.html代码：

<script>
    (function (window) {
        // 屏幕尺寸
        var screenSize = '';
        if (screen.width) {
            width = (screen.width) ? screen.width : '';
            height = (screen.height) ? screen.height : '';
            screenSize += '' + width + " x " + height;
        }

        window.jscd = {
            screen: screenSize,
        };
    }(this));
    alert(
        'Screen Size: ' + jscd.screen
    );

    $("#callGo").on('click', function() {
        $.ajax({
            url: "http://localhost:9000/callme",
            method: "POST",
            success: function() {
                $("#response").html(jscd.screen);
            },
        });
    });
</script>
</head>
<body>
    <button id="callGo" type="submit">Call Go Code</button>
    <div id="response"></div>
</body>

当我点击名为callGo的按钮时，响应区域的div应该显示成功添加的文本。但我该如何实现呢？如何将AJAX发送的数据连接到Go后端代码以插入MySQL？

以下是我的new.go文件：

package main

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

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

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

func main() {
    // 使用index.html文件处理根路径请求
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        if err := tmpl.ExecuteTemplate(w, "new.html", nil); err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
    })

    // 处理/callme路径的文本响应
    http.HandleFunc("/callme", func(w http.ResponseWriter, r *http.Request) {
        db, err := sql.Open("mysql", "root:@tcp(127.0.0.1:3306)/test_db")
        defer db.Close()
        if err != nil {
            panic(err.Error())
        }
        if r.Method == "POST" {
            insForm, err := db.Prepare("INSERT INTO screen(screen_size) VALUES(?)")
            if err != nil {
                panic(err.Error())
            }
            insForm.Exec(jscd.screen)
        }

        http.Redirect(w, r, "/", 301)
    })

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

更多关于Golang中如何使用Ajax将JavaScript变量存储到MySQL的实战教程也可以访问 https://www.itying.com/category-94-b0.html

2 回复

你需要在AJAX调用中添加要发送的数据

$.ajax({
url: "http://localhost:9000/callme",
method: "POST",
data: {"screenSize" : jscd.screen},
success: function() {
$("#response").html(jscd.screen);
},
});

然后在你的Go代码中，在handleFunc函数中通过r.Body接收参数

更多关于Golang中如何使用Ajax将JavaScript变量存储到MySQL的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


在Go后端代码中，您需要从AJAX请求中获取屏幕尺寸数据，而不是直接使用JavaScript变量jscd.screen。以下是修改后的代码：

new.html中的JavaScript修改：

$("#callGo").on('click', function() {
    $.ajax({
        url: "http://localhost:9000/callme",
        method: "POST",
        data: { screen_size: jscd.screen }, // 添加数据参数
        success: function(response) {
            $("#response").html(response);
        },
    });
});

new.go文件修改：

package main

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

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

var tmpl = template.Must(template.New("tmpl").ParseFiles("new.html"))

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        if err := tmpl.ExecuteTemplate(w, "new.html", nil); err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
    })

    http.HandleFunc("/callme", func(w http.ResponseWriter, r *http.Request) {
        // 设置CORS头，允许跨域请求
        w.Header().Set("Access-Control-Allow-Origin", "*")
        w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

        if r.Method == "POST" {
            // 解析表单数据
            err := r.ParseForm()
            if err != nil {
                http.Error(w, err.Error(), http.StatusBadRequest)
                return
            }

            // 获取屏幕尺寸参数
            screenSize := r.FormValue("screen_size")
            
            db, err := sql.Open("mysql", "root:@tcp(127.0.0.1:3306)/test_db")
            if err != nil {
                http.Error(w, err.Error(), http.StatusInternalServerError)
                return
            }
            defer db.Close()

            // 测试数据库连接
            err = db.Ping()
            if err != nil {
                http.Error(w, err.Error(), http.StatusInternalServerError)
                return
            }

            // 准备并执行插入语句
            insForm, err := db.Prepare("INSERT INTO screen(screen_size) VALUES(?)")
            if err != nil {
                http.Error(w, err.Error(), http.StatusInternalServerError)
                return
            }
            defer insForm.Close()

            result, err := insForm.Exec(screenSize)
            if err != nil {
                http.Error(w, err.Error(), http.StatusInternalServerError)
                return
            }

            // 检查插入结果
            rowsAffected, _ := result.RowsAffected()
            if rowsAffected > 0 {
                w.Write([]byte("屏幕尺寸 " + screenSize + " 已成功存储到数据库"))
            } else {
                w.Write([]byte("插入操作失败"))
            }
            return
        }
        
        http.Error(w, "方法不允许", http.StatusMethodNotAllowed)
    })

    log.Fatal(http.ListenAndServe(":9000", nil))
}

数据库表结构示例：

CREATE TABLE screen (
    id INT AUTO_INCREMENT PRIMARY KEY,
    screen_size VARCHAR(50) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

关键修改说明：

  1. 在AJAX请求中添加了data参数，将屏幕尺寸作为表单数据发送
  2. 在Go后端使用r.FormValue("screen_size")获取前端发送的数据
  3. 添加了错误处理和数据库连接测试
  4. 移除了重定向，改为直接返回响应消息
  5. 添加了CORS头以处理跨域请求
  6. 改进了数据库操作，添加了结果检查

现在当点击按钮时，屏幕尺寸将通过AJAX发送到Go后端，并存储到MySQL数据库中，响应区域将显示操作结果。

回到顶部