JavaScript jQuery 中 ajax 的简单使用

某呆啊

已于 2022-03-19 10:53:18 修改

阅读量1.4k

点赞数

分类专栏：杂七杂八的问题记录文章标签： javascript ajax jquery

于 2022-03-16 00:05:55 首次发布

本文链接：https://blog.csdn.net/q965844841qq/article/details/123515586

版权

杂七杂八的问题记录专栏收录该内容

31 篇文章 1 订阅

订阅专栏

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>')
                    }

在这里插入图片描述

某呆啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript jQuery 中 ajax 的简单使用

JS 对象转字符串var str = JSON.stringify(obj)JS 字符串转对象var obj = JSON.parse(str)后端使用 Flask 写一个可以返回数据的路由：from flask import Flask, render_templateapp = Flask(__name__)@app.route("/")def index(): return render_template("ajax_demo.html")@app.route("/
复制链接

扫一扫