当前位置：首页 > 文章列表 > Golang > Go问答 > HTML文档与服务器之间进行数据交换：AJAX请求和响应

HTML文档与服务器之间进行数据交换：AJAX请求和响应

来源：stackoverflow 2024-03-07 22:09:28 0浏览收藏

小伙伴们对Golang编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《HTML文档与服务器之间进行数据交换：AJAX请求和响应》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

问题内容

这个想法是有一个index.html，它通过apache web服务器提供服务，将数据发送到ip地址和端口（ajax）并等待然后显示的响应；用 go 编写的“数据”服务器等待接收数据，然后通过 ajax 发送回一些数据。

但不知何故，这不起作用并且不生成输出：

index.html：

<html>
  <head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
  </head>
  <body>

    <script>
      $(document).ready(function () {
        $('#button1').click(function () {
          $.ajax({
            url: '127.0.0.1:8888/receive',
            type: 'post',
            datatype: 'html',
            data : { post_data: 'hello world'},
            success : function(data) {
              $('#div1').html(data);
            },
          });
        });
      });
    </script>

    <div id='div1'>
      <h3>before</h3>
    </div>

    &lt;input id=&apos;button1&apos; type=&apos;button&apos; value=&apos;ajax post to golang server&apos;&gt;

  </body>
</html>

server.go：

package main

import (
  "fmt"
  "net/http"
)

func receiveAjax(w http.ResponseWriter, r *http.Request) {
 if r.Method == "POST" {
   data := r.FormValue("post_data")
   fmt.Println("Receive ajax post data string ", data)
   w.Write([]byte("<h2>after<h2>"))
 }
}

func main() {
 mux := http.NewServeMux()
 mux.HandleFunc("/receive", receiveAjax)

 http.ListenAndServe(":8888", mux)
}

解决方案

127.0.0.1:8888/receive 不是有效的 url（javascript 中的 ajax 调用因 syntaxerror: 无法在“xmlhttprequest”上执行“open”而失败：无效的 url” 但您没有捕获错误）。向 ajax 调用添加 error 函数可以更轻松地发现此类问题（浏览器开发工具也是如此）。

以下内容适用于我使用 http://127.0.0.1:8888/receive （请注意，我从 go 应用程序提供 javascript 以简化操作并避免 CORS 问题 - 在从以下位置提供页面时，您可能会收到其他错误apache，但至少您应该能够在浏览器控制台中看到出了什么问题）。

package main

import (
    "fmt"
    "net/http"
)

const html = `<html>
<head>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
</head>
<body>

  <script>
    $(document).ready(function () {
      $('#button1').click(function () {
        $.ajax({
          url: 'http://127.0.0.1:8888/receive',
          type: 'post',
          dataType: 'html',
          data : { post_data: 'hello world'},
          error : function(err) {
            console.log(err);
          },
          success : function(data) {
            $('#div1').html(data);
          },
        });
      });
    });
  </script>

  <div id='div1'>
    <h3>before</h3>
  </div>

  &lt;input id=&apos;button1&apos; type=&apos;button&apos; value=&apos;AJAX POST to golang server&apos;&gt;

</body>
</html>`

func receiveAjax(w http.ResponseWriter, r *http.Request) {
    if r.Method == "POST" {
        data := r.FormValue("post_data")
        fmt.Println("Receive ajax post data string ", data)
        w.Write([]byte("<h2>after<h2>"))
    }
}

func main() {
    mux := http.NewServeMux()
    mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { w.Write([]byte(html)) })
    mux.HandleFunc("/receive", receiveAjax)

    http.ListenAndServe(":8888", mux)
}

以上就是《HTML文档与服务器之间进行数据交换：AJAX请求和响应》的详细内容，更多关于的资料请关注golang学习网公众号！

版本声明

本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除