JS 对象转字符串
var str = JSON.stringify(obj)
JS 字符串转对象
var obj = JSON.parse(str)
后端使用 Flask 写一个可以返回数据的路由:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("ajax_demo.html")
@app.route("/getUserInfo/<username>")
def get_user_info(username):
user_info = {}
if username == "zhangsan":
user_info = {"username": "zhangsan", "age": 3, "mail": "1@1.com"}
return {"data": user_info, "status": 200}
if __name__ == "__main__":
app.run(debug=True)
前端 html 页面 ajax_demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Test</title>
<!-- 从公网引入 jquery -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="user">
<button type="submit" onclick="getTable1()">提交</button>
<p id="userinfo"></p>
</body>
</html>
<script>
function getTable1(){
if ($("#user").val() == ""){
$("#userinfo").text("内容不能为空!")
}else{
// $.ajax 接收一个参数,包含当前请求的所有配置
$.ajax({
url: './getUserInfo/' + $("#user").val(), // 必填,请求的地址
type: 'GET', // 选填,请求方式默认是 GET(忽略大小写)
data: {}, // 选填,发送 POST 请求时携带的参数
dataType: 'json', // 选填,期望返回值的数据类型,默认是 string
async: true, // 选填,是否异步,默认是 true
success: function(data){
// 写入前端页面的必须是字符串,这里回调函数返回的是一个 Object,需要转成字符串
$("#userinfo").text(JSON.stringify(data))
console.log(data["data"])
}, // 选填,成功的回调函数
error: function(){$("#userinfo").text("获取信息失败")}, // 选填,失败的回调函数,例如请求的地址不通
cache: true, // 选填,是否缓存,默认是 true
context: "", // 选填,回调函数中的 this 指向,默认是 ajax 对象
status: {}, // 选填,根据对应的状态码进行函数执行
timeout: 1000, // 选填,超时事件
})
}
}
</script>
运行效果:
如果直接点击提交
,JS 会在 p
标签写入文字
if ($("#user").val() == ""){
$("#userinfo").text("内容不能为空!")}
写入任意字符,调用后端接口,返回数据
写入符合需求的用户信息,返回数据
将 success
的回调函数做下修改,返回一个表格看看:
success: function(data){
//$("#userinfo").text(JSON.stringify(data))
//console.log(data["data"])
for (var key in data.data){
$("#userinfo").append('<tr><th>'+key+'</th><td>'+data.data[key]+'</td></tr>')
}