如何用jquery发送ajax请求

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

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

导读：如何用jquery发送ajax请求，二、发送post请求(json) !DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>Title/title> script src="/static/js/jquery.js">/script> style> #mask{ position:fixed; top:0; left:0; right

如何用jquery发送ajax请求

二、 发送post请求(json)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery.js"></script>
    <style>
        #mask{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom: 0;
            background-color: rgba(0,0,0, .3);
            color: #fff;
            font-size:30px;
            text-align: center;
            padding-top:300px;
            display:none;
        }
</style>
    <script>
        $(function(){
            $(".post_btn").click(function(){
                $('#mask').css("display","block");
                $("#data_tbody").remove();
                $.ajax({
                    url:'/ajax_post',
                    method:'post',
                    data: JSON.stringify({
                        name:'felix',
                        id:'10086'
                    }),
                    headers: {  // 发送json数据. 要换这个头, 否则服务器收不到数据
                        "Content-Type": "application/json;charset=utf-8"
                    },
                    dataType:"text",
                    success:function(d){
                        $('#mask').css("display","none"); // 设置不遮罩
                        let data = JSON.parse(d);
                        let tbody = $("<tbody id='data_tbody'></tbody>")
                        data.forEach(function(item){
                            let tr = `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.age}</td></tr>`;
                            tbody.append(tr);
                        });
                        $('table').append(tbody);
                    }
                })
            });
        })
</script>
</head>
<body>
    我就是一个传统的html页面, 我的名字是{{name}}
    <br/>
    <input type="button" value="点我发送get_请求">
    <hr/>
    <a href="javascript:void(0);" >点我发送post_请求_加载一个表格试试</a>
    <hr/>
    <table width="80%" border="1">
        <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
        </tr>
        </thead>
    </table>
    <div id="mask"><span>正在加载中......</span></div>
</body>
</html>

python服务器:

from flask import Flask, render_template, request  # pip install Flask
import time
import json
app = Flask(__name__)
@app.route("/")
def index():
    # 跳转到首页
    print("你曾经来过服务器")
    name = "felix"
    return render_template("index.html", name=name)  # 数据是在这里渲染后, 返回个客户端的html
@app.route("/ajax_post", methods=['POST'])
def ajax_get_post():
    # time.sleep(3)
    # 接收JSON数据
    print(request.json)
    lst = [
        {"id": 1, "name": "张飞", "age": 16},
        {"id": 2, "name": "孙斌", "age": 16},
        {"id": 3, "name": "王五", "age": 16},
        {"id": 4, "name": "大佬", "age": 16},
    ]
    return json.dumps(lst)
if __name__ == '__main__':
    app.run()

以上是IT袋网网关于如何用jquery发送ajax请求的经验小知识，希望看完本文能给您带来一点帮助！