英文:
golang javascript ui issue
问题
以下是翻译好的内容：
以下的HTML代码可以独立工作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><input type='text' name='name[]' /></td> <td><input type='text' name='value[]' /></td> <td><input type='checkbox' name='regex[]' /></td><td><input type='button' class='add' value='Add More' /></td></tr>";
$("tr:last").after(appendTxt);
});
});
</script>
<style>
table {
table-layout: fixed;
width:1200px;
}
input{
width:285px;
}
</style>
</head>
<body>
<form method="post" action="/silencealert">
<table id="options-table">
<tr>
<td>Name</td>
<td>Value</td>
<td>Regex</td>
<td> </td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</table>
<br>
<label for="number"> Expires(Days[1-30]): </label>
<input type="number" min="1" max="30" value="" name="days">
<br><br>
<button type="submit">SilenceAlert</button>
</form>
<hr>
<small>User: %s</small>
</body>
</html>
以上的文件中，当我点击"Add More"按钮时，会添加一行新的表格行，当我点击"Delete"按钮时，会删除一行表格行，这是预期的行为。
我在一个Go语言项目中使用了上述的HTML代码（文件名为main.go）：
package main
import (
"fmt"
"github.com/gorilla/mux"
"net/http"
)
const manage_alertsPage = `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><input type='text' name='name[]' /></td> <td><input type='text' name='value[]' /></td> <td><input type='checkbox' name='regex[]' /></td><td><input type='button' class='add' value='Add More' /></td></tr>";
$("tr:last").after(appendTxt);
});
});
</script>
<style>
table {
table-layout: fixed;
width:1200px;
}
input{
width:285px;
}
</style>
</head>
<body>
<form method="post" action="/silencealert">
<table id="options-table">
<tr>
<td>Name</td>
<td>Value</td>
<td>Regex</td>
<td> </td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</table>
<br>
<label for="number"> Expires(Days[1-30]): </label>
<input type="number" min="1" max="30" value="" name="days">
<br><br>
<button type="submit">SilenceAlert</button>
</form>
<hr>
</body>
</html>
`
func manage_alertsPageHandler(response http.ResponseWriter, request *http.Request) {
fmt.Fprintf(response, manage_alertsPage)
}
func silencealertPageHandler(response http.ResponseWriter, request *http.Request) {
err := request.ParseForm()
if err != nil {
// Handle error here via logging and then return
fmt.Fprintf(response, "There was an error processing form: "+err.Error())
return
}
fmt.Printf("%+v\n", request.Form)
fmt.Fprintf(response, manage_alertsPage)
}
// server main method
var router = mux.NewRouter()
func main() {
router.HandleFunc("/manage_alerts", manage_alertsPageHandler)
router.HandleFunc("/silencealert", silencealertPageHandler)
http.Handle("/", router)
http.ListenAndServe(":8000", nil)
}
Go项目的文件夹结构如下：
src/web
- main.go
- jquery-1.7.min.js
当我运行该Go项目时：
go run main.go
在浏览器中打开：
localhost:8000/manage_alerts
点击"Add More"或"Delete"按钮时，没有任何反应。
我需要帮助找出为什么JavaScript代码在这里无法执行，而在Golang代码之外却可以正常执行。
英文:
Following html works standalone
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><input type='text' name='name[]' /></td> <td><input type='text' name='value[]' /></td> <td><input type='checkbox' name='regex[]' /></td><td><input type='button' class='add' value='Add More' /></td></tr>";
$("tr:last").after(appendTxt);
});
});
</script>
<style>
table {
table-layout: fixed;
width:1200px;
}
input{
width:285px;
}
</style>
</head>
<body>
<form method="post" action="/silencealert">
<table id="options-table">
<tr>
<td>Name</td>
<td>Value</td>
<td>Regex</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</table>
<br>
<label for="number"> Expires(Days[1-30]): </label>
<input type="number" min="1" max="30" value="" name="days">
<br><br>
<button type="submit">SilenceAlert</button>
</form>
<hr>
<small>User: %s</small>
</body>
</html>
With the above file when i click on Add More a new table row gets added and when i click delete a table row gets deleted. which is the expected behaiour.
I am using the above html in a golang project (file - main.go)
package main
import (
"fmt"
"github.com/gorilla/mux"
"net/http"
)
const manage_alertsPage = `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><input type='text' name='name[]' /></td> <td><input type='text' name='value[]' /></td> <td><input type='checkbox' name='regex[]' /></td><td><input type='button' class='add' value='Add More' /></td></tr>";
$("tr:last").after(appendTxt);
});
});
</script>
<style>
table {
table-layout: fixed;
width:1200px;
}
input{
width:285px;
}
</style>
</head>
<body>
<form method="post" action="/silencealert">
<table id="options-table">
<tr>
<td>Name</td>
<td>Value</td>
<td>Regex</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
</tr>
<tr>
<td><input type="text" name="name[]" /></td>
<td><input type="text" name="value[]" /></td>
<td><input type="checkbox" name="regex[]" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</table>
<br>
<label for="number"> Expires(Days[1-30]): </label>
<input type="number" min="1" max="30" value="" name="days">
<br><br>
<button type="submit">SilenceAlert</button>
</form>
<hr>
</body>
</html>
`
func manage_alertsPageHandler(response http.ResponseWriter, request *http.Request) {
fmt.Fprintf(response, manage_alertsPage)
}
func silencealertPageHandler(response http.ResponseWriter, request *http.Request) {
err := request.ParseForm()
if err != nil {
// Handle error here via logging and then return
fmt.Fprintf(response, "There was an error processing form: " + err.Error())
return
}
fmt.Printf("%+v\n", request.Form)
fmt.Fprintf(response, manage_alertsPage)
}
// server main method
var router = mux.NewRouter()
func main() {
router.HandleFunc("/manage_alerts", manage_alertsPageHandler)
router.HandleFunc("/silencealert", silencealertPageHandler)
http.Handle("/", router)
http.ListenAndServe(":8000", nil)
}
The folder structure for the go project is
src/web
- main.go
- jquery-1.7.min.js
when i run the go project:
go run main.go
Browse to
localhost:8000/manage_alerts
Click on Add More or Delete button, nothing happens
Need some help to figure out why javascript code is not executing here when it was executing just fine outside of the golang code.
答案1
得分: 1
当您直接在浏览器中打开HTML文件时，浏览器会在您的文件系统中查找jquery文件。当您通过导航到localhost:8000/...查看页面时，浏览器会在localhost:8000/...查找jquery文件。
您的Go应用程序只能处理您注册的这两个路径的请求。它呈现的HTML页面将请求localhost:8000/jquery-1.7.min.js以下载jquery文件，但您没有注册处理此类请求的处理程序...
也就是说，您缺少类似于以下内容的代码：
router.HandleFunc("/jquery-1.7.min.js", serveJQuery)
不过在实际情况中，您可能希望提供多个文件，因此请查看gorilla/mux的自述文件中有关静态文件的更完整解决方案。
英文:
When you open the HTML file directly in the browser, the browser will look for the jquery file in your file system. When you view the page by navigating to localhost:8000/... the browser will look for the jquery file at localhost:8000/....
Your Go app can handle requests to only those two paths that your registered. The html page it renders will make a request to localhost:8000/jquery-1.7.min.js to download the jquery file but you did not register a handler to handle such a request...
That is, you're missing something like this:
router.HandleFunc("/jquery-1.7.min.js", serveJQuery)
In the real world though you probably will want to serve more than just a single file, so have a look at gorilla/mux's readme on static files for a more complete solution.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论