当前位置：主页 > 经验教程 > 建站编程 >

如何用jquery发送ajax请求

如何用jquery发送ajax请求使用jQuery发送AJAX请求的方法

时间：2024-02-06 19:26:03 来源：IT袋作者：马勇

导读：如何用jquery发送ajax请求，今天小编详解如何用jquery发送ajax请求的相关知识，接下来就是全面介绍。首先, 我们用Flask创建一个后台服务器(自己做网站了哈) 目录结构: 服务端： from flask

如何用jquery发送ajax请求

今天小编详解如何用jquery发送ajax请求的相关知识，接下来就是全面介绍。

首先, 我们用Flask创建一个后台服务器(自己做网站了哈)

目录结构:

如何用jquery发送ajax请求

服务端：


from flask import Flask, render_template, request  # pip install Flask
app = Flask(__name__)
@app.route("/")
def index():
    # 跳转到首页
    print("你曾经来过服务器")
    name = "felix"
    # 数据是在这里渲染后, 返回个客户端的html
    return render_template("index.html", name=name)  
if __name__ == '__main__':
    app.run()

html：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery.js"></script>
</head>
<body>
    我就是一个传统的html页面, 我的名字是{{name}}
</body>

一、发送get请求

接下来. 我们使用jquery来发送ajax.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery.js"></script>
    <script>
        function setCookie(name, value) {
            let Days = 30;
            let exp = new Date();
            exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
        }
        $(function(){
            // 可以在js任意位置设置cookie信息
            setCookie("name", "i-have-a-dream")
            $(".get_btn").click(function(){
                $.ajax({
                    url:"/ajax_get", // 服务器地址: 域名+url
                    method:'get',  // 发送get请求
                    headers:{  // 添加请求头信息
                        "token":"mememmememe",
                    },
                    data:{   // 传递参数
                        name:'felix',
                        _: new Date().getTime()
                    },
                    contentType:'application/json;charset=utf8',  
                    beforeSend: function(req){  // 也可以这样添加请求头信息
                        req.setRequestHeader("tokken", "i-can-do-it-haha");
                    },
                    success: function(back){  // 请求成功后. 返回数据了. 要做什么?
                        console.log(back);
                    }
                });
            })
        })
</script>
</head>
<body>
    我就是一个传统的html页面, 我的名字是{{name}}
    <br/>
    <input type="button" value="点我发送get_请求">
    <hr/>
    <a href="javascript:void(0);" >点我发送post_请求</a>
</body>
</html>

服务器处理ajax_get请求：


@app.route("/ajax_get")
def ajax_get_req():
    # 接收cookie中的信息
    n = request.cookies.get('name')
    if not n:
        return "没有cookie就不要来了."
    # 接收header中的信息
    token = request.headers.get('token')
    if not token:
        return "没token还想来?"
    # Flask接收get请求的参数
    name = request.args.get('name')
    _ = request.args.get('_')
    if name and _:
        # 返回json
        return {"name":'felix', "id": 10086, "isMen": True}
    else:
        return "回家去吧"

12 下一页