Выполнение/вызов функции из Go файла при нажатии на кнопку html?

Question

[Александр]

Привет. Учусь создавать веб приложения на Golang.
Дефолтно кнопки html могут выполнять функции JS.
Как вызывать функцию из Go кода при нажатии юзером кнопки на сайте?
Конечно сначала порылся в инете. Все сводится к AJAX либо Rest api. Но по заданному вопросу информации не наблюдается. В основном все про создание и тестирование сервера и просто вода про возможности. Никакой конкретики.

Т.е. для точности примера:
в main.go в функции страницы имеется условная функция foo() которая обрабатывает данные на странице и выводит.
В html имеется кнопка, при нажатии на которую необходимо выполнить эту функцию foo()

Куча ответов абстрактны: используй AJAX или Rest API. Материалов по конкретным задачам с использованием этих ресурсов я не нашел. Только общий план работы.
Спасибо.

Comments

[Everything_is_not_so_bad]

Это больше вопрос про основы работы веб-разработки и мало чем отличается от принципа работы с другими языками.

[xmcuz]

> Куча ответов абстрактны: используй AJAX или Rest API.

Так используй. Начни с изучения, что такое Ajax, и его историю.

А лучше начни с самых основ. В частности отправки данных из html формы с помощью GET и POST запросов.
Для начала открой веб консоль, сделай простую html форму и отправь данные нажав кнопку submit, и посмотри что будет в консоли. Какие данные уходят.
Далее уже в качестве action ставишь url адреса, где у тебя висит запущенные сервер на Go. Он уже принимает данные с формы, обрабатывает и вызывает прописанные тобой функции.

Answer 1

[Евгений Мамонов]

Алгоритм у вас будет примерно таким...
При нажатии на кнопку у вас будет вызвана функция (обработчик события onClick у кнопки).
В этой функции вы сделаете AJAX запрос по протоколу HTTP на ваш сервер, где запущено ваше ПО на Go.
В main.go вы запускаете HTTP сервер, который примет запрос от вашей функции JavaScript, обработает его и ответит.

Разберём самый простой вариант с методом GET, чтобы вам было проще тестировать.

На сервере (своём компьютере) запускаете main.go примерно такого содержания

package main

import (
    "fmt"
    "net/http"
)

func helloHandler(w http.ResponseWriter, req *http.Request) {
    fmt.Fprintf(w, "hello\n")
}

func main() {
    http.HandleFunc("/hello", helloHandler)

    http.ListenAndServe(":8081", nil)
}

Этот сервис будет слушать порт 8081 любого IP адреса на сервере, где будет запущен.
Предположим, что вы тестируете на своём компьютере, в этом случае для проверки вам нужно в браузере откройте url `127.0.0.1:8081/hello`
После этого вы должны увидеть в ответе просто текст: "hello".
Когда этот этап будет завершен - вы сможете перейти к вызову этого URL уже из JavaScript.
Для этого можете использовать то, что вам привычнее, если такого нет - можете воспользоваться этим примером

const req = new XMLHttpRequest();
  const url='http://127.0.0.1:8081/hello';
  req.open("GET", url);
  req.send();
  req.onreadystatechange=(e)=>{
    console.log(req.responseText)
  }

PS: Если не понятно или что-то не получится - пишите, помогу разобраться.

Comments

[Александр]

Cпасибо за развернутый ответ, но все же это не совсем то. Как я понял ваш пример позволяет (повторно) вызывать функцию обработки страницы?

У меня при загрузке страницы идет выгрузка БД в структуру. Далее идет встроенная функция, которая берет рандомный объект этой структуры и выводит на страницу через Execute.

На данном этапе, чтобы сменить объект (и информацию которую он посылает на страницу) приходится при нажатии на кнопку перезагружать всю страницу, что повторяет код и выборку случайного объекта.

Т.е. требуется, чтобы при нажатии на кнопку не происходила перезагрузка страницы, а лишь была вызвана повторно встроенная функция выбора случайного объекта.

Извините, если не понятно)

[Rerurk]

Попробуйте разобрать что происходит в коде js, тогда будет понятно. Вместо вывода
В console, встройте свою нужную функцию

[Александр]

Rerurk, Я попробовал сделать это сразу же. Но получается, что функция рандомизации будет вынесена в функцию helloHandler, т.е. станет недееспособной, т.к. передать в нее и вернуть из нее в изначальную функцию страницы невозможно.

func MainPage((w http.ResponseWriter, req *http.Request) {
//**код

var := func Random(struct) struct {}
.ExecuteTemplate(w, "main", var)
  }
// а получится так?
 
func helloHandler(w http.ResponseWriter, req *http.Request) {
     func Random(struct) struct {}    // не передать аргументом и не вернуть результат в функцию MainPage
}

Можно, конечно, тело функции Рандома передать в helloHandler, но все таже проблема аргумента и возврата, т.к. вылезает ошибка, если в аргументы вставить иное, чем (w http.ResponseWriter, req *http.Request)
Или я очень сильно туплю. =) Это одна из двух проблем. которые я пытаюсь решить несколько суток. Из-за предыдущей за двое прошлых два дня спал всего 3 часа =)

[Евгений Мамонов]

Не совсем понятно какую задачу нужно решить, нужно больше подробностей, а лучше подробности + код :)
Если проблема в том, что страница перегружается после нажатия на кнопку, рискну предположить, что нужно сделать что-то типа такого (вернуть false из обработчика события)

<input type="button" onClick="return myHandler()" />
<script>
function myHandler() {
    // тут делаете всё, что вам нужно
    return false;
}
</script>

Это приведёт к тому, что страница не будет перегружаться после нажатия на кнопку.

Если же вам нужно сделать один запрос в базу, а потом многокрано отвечать на запросы страницы без потери результатов выборки - тогда, как вариант, можно при запуске (если такой вариант приемлем) вычитать данные из базы и уже в helloHandler выбирать из них и отдавать ответ.

Также, на всякий случай, напишу, что вы можете передавать параметры в helloHandler
Для передачи при вызове URL методом GET вы можете делать вызовы

http://127.0.0.1:8081/hello?param1=value1&param2=value2

А в helloHandler их получать примерно так

func helloHandler(w http.ResponseWriter, req *http.Request) {
    param1 := r.URL.Query().Get(`param1`)
    fmt.Fprintf(w, "hello: %s\n", param1)
}

Если нужен пример для запроса методом POST напишите.

В общем постарайтесь описать задачу, которую вы решаете, возможно для вашей задачи нужно какое то другое решение

[Александр]

Евгений Мамонов, Спасибо. Чуть позже попробую разобрать ваш пример.
Вот код:
Исполняющий Go файл
https://github.com/PulsarG/Cards/blob/master/main.go

HTML главной, страницы, на которой обработка функции
https://github.com/PulsarG/Cards/blob/master/html/...

Ну и JS
https://github.com/PulsarG/Cards/blob/master/js/ma...

В main.go запускается функция главной страницы MainPage, в которой идет выгрузка БД в слайс структур. Далее этот слайс передается в функцию Next(struct)struct , в которой берется рандомный объект-структура и подается в ExecuteTemplate для вывода на страницу.

Сейчас в html убрано действие с кнопок, но ранее был костыль, чтобы сменить рандомную структуру ( чтобы получить другие данные для вывода) при нажатии на кнопки происходил action="/" - т.е. просто страница перезагружалась и значит функция выбора рандомного объекта из слайса структур в функции Next() вызывалась заново, и на страницу выводились другие данные.

В общем то и так не плохо, но пока БД маленькая. Если она разрастется, то это вскоре может занимать время, страница и так может не сразу ответить и на момент быть просто белой, пока не прогрузить всё.
Значит надо не перезагружать страницу а лишь вызвать повторно функцию Next() для повторной рандомизации.

Да и рандомизация не самое важное. Далее буду внедрять обработку выводимых данных по обратной связи с БД. Т.е. нарандомило из слайса случайный объект. И юзер хочет удалить его из БД или изменить. Тут уже точно надо вызывать функцию из Go файла для обработки запроса и апдейта строки БД. Т.е. обновление страницы наоборот помешает и переключит на другой объект.

На функции рандомизации вот именно и учусь вызывать функции Go кода из html кнопок.

Извините за длиннотекст.

[Rerurk]

Furylon, мне кажется, может это и не так. Вам стоит внимательно начать с азов

[Евгений Мамонов]

Furylon, опишите пожалуйста задачу которую вы решаете, так будет проще найти правильное решение задачи. Сейчас у вас описано ваше решение задачи, а не сама задача.

Полностью согласен с Rerurk, в идеале вам нужно разобраться как именно происходит взаимодействие клиентского JavaScript с сервером.

Возможно у вас не самая подходящая для обучения задача выбрана.
Лучше начать с задачи попроще.

Например...
Получение времени сервера по нажатию кнопки.
Т.е. вы в браузере нажали кнопку, на сервер ушел запрос типа "сколько сейчас времени", вернулся ответ 10:30 и вы отобразили этот ответ на странице.

Потом можно немного усложнить, добавить обработку параметров, сделать что-то типа такого...
Запрос курса валюты.
В html делаете selectbox, в котором нужно выбрать валюту (доллар или евро), выбранное значение отправляете на сервер. Сервер, в зависимости от указанной валюты, возвращает её курс, который вы опять же отображаете на странице без перезагрузки.

Когда вы сможете сделать эти задачи- вам станет понятнее как реализовать вашу.

[Rerurk]

Евгений Мамонов, евгений. Вопрос не в тему : fyne не юзали?

[Евгений Мамонов]

Rerurk, пока нет, но тоже интересно его попробовать :) Пока для мобильных приложений и т.д. используем Flutter.

[Rerurk]

Евгений Мамонов, если вдруг нечаянно начнёте юзать... И разберётсь как по умолчанию container сделать hidden, напишите пожалуйста)

[Евгений Мамонов]

Хорошо :)))

[Александр]

Евгений Мамонов, Чтобы при клике на кнопку на странице выполнилась функция func Next() {}
которая идет за функцией MainPage в файле main.go
https://github.com/PulsarG/Cards/blob/master/main.go

func MainPage(w http.ResponseWriter, r *http.Request) {

	m, _ := template.ParseFiles("html/main.html", "html/header.html", "html/footer.html")

	res, err := database.Query(fmt.Sprintf("SELECT * FROM `words` WHERE freq > 0"))
	if err != nil {
		panic(err)
	}
	defer res.Close()

	wordsarray := []WordsStruct{}

	for res.Next() {
		var sw WordsStruct
		err := res.Scan(&sw.Id, &sw.Fword, &sw.Sword, &sw.Freq)
		if err != nil {
			fmt.Println(err)
			continue
		}
		wordsarray = append(wordsarray, sw)
	}

	show := Next(wordsarray)

	m.ExecuteTemplate(w, "main", show)
	
	//m.ExecuteTemplate(w, "main", Next(wordsarray))

}


func Next(st []WordsStruct) WordsStruct {
	rand.Seed(time.Now().Unix())
	shw := st[rand.Intn(len(st))]
	return shw
}

[Rerurk]

Furylon, вы понимаете как фронт взаимодействует с бек?

[Евгений Мамонов]

Так как вы хотите сделать можно, но это будет не правильно, но я распишу для того, чтобы вам стало понятнее как оно работает. Когда придёт понимание - можно будет уже сделать по нормальному.
В коде использую ваши названия, т.к. рефакторинг не актуален, чтобы на запутать вас.

Ваш main.go должен быть примерно таким

package main

import (
	"database/sql"
	"fmt"
	"html/template"
	//"log"
	_ "github.com/go-sql-driver/mysql"
	"github.com/gorilla/mux"
	"math/rand"
	"net/http"
	"time"
)

type WordsStruct struct { // выгрузка БД
	Id    int
	Fword string
	Sword string
	Freq  int
}

var database *sql.DB

// глобальные переменные - это плохо, с ними будет трудно работать в будущем,
// особенно при покрытии кода тестами
// но сейчас мы её используем, чтобы не усложнять код.
var words []WordsStruct

// LoadWords вычитывает все данные из таблицы words
func LoadWords() ([]WordsStruct, error) {
    res, err := database.Query(fmt.Sprintf("SELECT * FROM `words`"))
    if err != nil {
        return nil, err
    }
    defer res.Close()

    wordsarray := []WordsStruct{}

    for res.Next() {
        var sw WordsStruct
        err := res.Scan(&sw.Id, &sw.Fword, &sw.Sword, &sw.Freq)
        if err != nil {
	    fmt.Println(err)
	    continue
        }
        wordsarray = append(wordsarray, sw)
    }
    return wordsarray, nil
}

func MainPage(w http.ResponseWriter, r *http.Request) {
    m, _ := template.ParseFiles("html/main.html", "html/header.html", "html/footer.html")

    // берём данные из глобальной переменной words, 
    // которая уже хранит вычитанные данные из базы
    show := Next(words)

    m.ExecuteTemplate(w, "main", show)
}


func Next(st []WordsStruct) WordsStruct {
    shw := st[rand.Intn(len(st))]
    return shw
}

func List(w http.ResponseWriter, r *http.Request) {
    m, _ := template.ParseFiles("html/list.html", "html/header.html", "html/footer.html")

    // берём данные из глобальной переменной words, 
    // которая уже хранит вычитанные данные из базы
    m.ExecuteTemplate(w, "list", words)
}

func AddWords(w http.ResponseWriter, r *http.Request) {
    // тут вы пишите новое слово в базу

    // после записи в базу нужно будет перечитать данные заново (простой вариант)
    // или модифицировать структуру (правильный вариант, т.к. снижает нагрузку на базу)
    // пойдём простым путём
    words, err = LoadWords()
    if err != nil {
        // ответ об ошибке
        return
    }

    // ответ когда все хорошо
}

// *****************************************************************************************************************************************************************

func StartFunc() {
    rtr := mux.NewRouter()

    http.Handle("/", rtr)

    http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("./css/"))))
    http.Handle("/js/", http.StripPrefix("/js/", http.FileServer(http.Dir("./js/"))))
    http.Handle("/html/", http.StripPrefix("/html/", http.FileServer(http.Dir("./html/"))))

    rtr.HandleFunc("/", MainPage)
    rtr.HandleFunc("/list", List)
    rtr.HandleFunc("/addwords", AddWords).Methods("POST")

    http.ListenAndServe(":5500", nil)
}

func main() {
    // лучше вызывать rand.Seed один раз при запуске, а не каждый раз, 
    // иначе можно будет просчитать результат.
    rand.Seed(time.Now().Unix())

    db, err := sql.Open("mysql", "root:@tcp(127.0.0.1:3306)/wordcard")
    if err != nil {
        //log.Println(err)
        panic(err)
    }

    database = db
    defer db.Close()

    // вычитываем данные из базы и сохраняем их в структуру, 
    // чтобы потом могли их использовать в ответе	
    words, err = LoadWords()
    if err != nil {
        panic(err)
    }
    StartFunc()
}

PS: вот так делать совсем нельзя, вы получите SQL инъекцию + Query используется для извлечения данных, для записи используйте Exec

db.Query(fmt.Sprintf("INSERT INTO `words` (`firstword`, `secondword`, `freq`) VALUES ('%s', '%s', '%d')", firstWord, secondWord, frequens))

Делайте лучше так

db.Exec("INSERT INTO `words` (`firstword`, `secondword`, `freq`) VALUES (?, ?, ?)", firstWord, secondWord, frequens))

Когда это у вас заработает, следующим шагом нужно проработать обмен данными в формате JSON.

[Александр]

Евгений Мамонов, Спасибо. С одного этого ответа я узнал больше полезного, чем за десяток прочитанных статей за за прошедший день =)
Буду углубляться в json, хотя пока все так же абстрактно подается.

[Евгений Мамонов]

Вам просто нужно идти последовательно, вы взяли задачу, для реализации которой нужно освоить сразу много разных направлений, такое одномоментно трудно "переварить".

Вам нужен план обучения и задачи, которые будут соответствовать ходу обучения, тогда обучение пойдёт быстрее и проще. Это очень хорошо, что вы не сдаётесь и ищите решение, обычно, когда что-то не получается и/или возникают трудности, у людей пропадает мотивация заниматься трудной задачей :)

Если будет нужна помощь с придумыванием задач :) - пишите, постараюсь вам помочь.

[Александр]

Евгений Мамонов, Задачки - это интересно =) Я не против =)
Кстати, в вашем последнем примере выдает ошибку не использования переменной в функции мейн:

func main () {
// код

 words, err = LoadWords()
    if err != nil {
        panic(err)
    }

}

Переменная words объявлена в main, но используется в других функциях. Из-за не использования в main() выдает ошибку "декларировано, но не использовано"

[Евгений Мамонов]

Подозреваю, что ругается на то, что err не объявлен, объявите его.
Я код написал руками, без IDE, мог подобные вещи упустить :)

func main () {
    var err error // объявите err
    words, err = LoadWords()
    if err != nil {
        panic(err)
    }
}

[Александр]

Евгений Мамонов, Нет, указывается именно words =(

[Евгений Мамонов]

Вот проверенный вариант, возьмите его за основу и в него уже добавляйте ваш код

package main

import (
  "database/sql"
  "fmt"
  "html/template"
  _ "github.com/go-sql-driver/mysql"
  "github.com/gorilla/mux"
  "math/rand"
  "net/http"
  "time"
)

type WordsStruct struct { // выгрузка БД
  Id    int
  Fword string
  Sword string
  Freq  int
}

var database *sql.DB

// глобальные переменные - это плохо, с ними будет трудно работать в будущем,
// особенно при покрытии кода тестами
// но сейчас мы её используем, чтобы не усложнять код.
var words []WordsStruct

var err error

// LoadWords вычитывает все данные из таблицы words
func LoadWords() ([]WordsStruct, error) {
    res, err := database.Query(fmt.Sprintf("SELECT * FROM `words`"))
    if err != nil {
        return nil, err
    }
    defer res.Close()

    wordsarray := []WordsStruct{}

    for res.Next() {
        var sw WordsStruct
        err := res.Scan(&sw.Id, &sw.Fword, &sw.Sword, &sw.Freq)
        if err != nil {
      fmt.Println(err)
      continue
        }
        wordsarray = append(wordsarray, sw)
    }
    return wordsarray, nil
}

func MainPage(w http.ResponseWriter, r *http.Request) {
    m, _ := template.ParseFiles("html/main.html", "html/header.html", "html/footer.html")

    // берём данные из глобальной переменной words, 
    // которая уже хранит вычитанные данные из базы
    show := Next(words)

    m.ExecuteTemplate(w, "main", show)
}


func Next(st []WordsStruct) WordsStruct {
    shw := st[rand.Intn(len(st))]
    return shw
}

func List(w http.ResponseWriter, r *http.Request) {
    m, _ := template.ParseFiles("html/list.html", "html/header.html", "html/footer.html")

    // берём данные из глобальной переменной words, 
    // которая уже хранит вычитанные данные из базы
    m.ExecuteTemplate(w, "list", words)
}

func AddWords(w http.ResponseWriter, r *http.Request) {
    // тут вы пишите новое слово в базу

    // после записи в базу нужно будет перечитать данные заново (простой вариант)
    // или модифицировать структуру (правильный вариант, т.к. снижает нагрузку на базу)
    // пойдём простым путём
    words, err = LoadWords()
    if err != nil {
        // ответ об ошибке
        return
    }

    // ответ когда все хорошо
}

// *****************************************************************************************************************************************************************

func StartFunc() {
    rtr := mux.NewRouter()

    http.Handle("/", rtr)

    http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("./css/"))))
    http.Handle("/js/", http.StripPrefix("/js/", http.FileServer(http.Dir("./js/"))))
    http.Handle("/html/", http.StripPrefix("/html/", http.FileServer(http.Dir("./html/"))))

    rtr.HandleFunc("/", MainPage)
    rtr.HandleFunc("/list", List)
    rtr.HandleFunc("/addwords", AddWords).Methods("POST")

    http.ListenAndServe(":5500", nil)
}

func main() {
    // лучше вызывать rand.Seed один раз при запуске, а не каждый раз, 
    // иначе можно будет просчитать результат.
    rand.Seed(time.Now().Unix())

    db, err := sql.Open("mysql", "root:@tcp(127.0.0.1:3306)/wordcard")
    if err != nil {
        //log.Println(err)
        panic(err)
    }

    database = db
    defer db.Close()

    // вычитываем данные из базы и сохраняем их в структуру, 
    // чтобы потом могли их использовать в ответе	
    words, err = LoadWords()
    if err != nil {
        panic(err)
    }
    StartFunc()
}

[Евгений Мамонов]

Furylon, вот... видите, еще не успели начать писать, а проблемы из-за глобальных переменных уже начались ))