jQuery ajax
参数信息
- method:类型，"POST"或者"GET"，默认是"GET"。
- url:发送请求的地址。
- data：是一个对象，连同请求发送到服务器的数据
- dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json"。
- success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
- error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。
使用方法
$.ajax({
url:'请求地址',
method:'post',
data:json格式数据,
dataType: "json",
success:function (data) {
console.log(data)
}
});
事例(登录用户名检测ajax+go后端)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<label for="">用户名：</label><input type="text" id="user" onblur="userfor()"><span id="userinfor"></span><br>
</div>
<script type="text/javascript">
function userfor() {
var user =$('#user').val();
$.ajax({
url:'/login',
method:'post',
data:{user:user},
dataType: "json",
success:function (data) {
$('#userinfor').css("color","red");
$('#userinfor').html(data.status)
}
});
}
</script>
</body>
</html>
go语言
package main
import (
"github.com/gin-gonic/gin"
"net/http"
)
// 定义接收数据的结构体
type User struct {
// binding:"required"修饰的字段，若接收为空值，则报错，是必须字段
Username string `json:"user" form:"user"`
}
func Hello(c *gin.Context) {
switch c.Request.Method {
case http.MethodGet:
c.HTML(http.StatusOK, "login.html", nil)
case http.MethodPost:
//// 声明接收的变量
var login User
//// Bind()默认解析并绑定form格式
//// 根据请求头中content-type自动推断
err := c.ShouldBind(&login)
if err != nil {
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
return
}
if login.Username == "user"{
c.JSON(http.StatusOK, gin.H{"status": "用户名重复"})
return
} else {
c.JSON(http.StatusOK, gin.H{"status": "ok"})
return
}
default:
c.JSON(http.StatusOK,gin.H{
"status":"ok",
})
}
}
func main() {
r := gin.Default()
r.LoadHTMLGlob("templates/*")
r.Any("/login", Hello)
r.Run(":8000")
}