Ajax Post 数据给后端

# Ajax Post 数据

---

## define method

在 cmdb.py  中定义一个方法，用于接收前端的数据

```python
@cmdb.route('/ajax_post',methods=['get','post'])
# 这里不支持 post ，需要手动指定为 post 接收。
def ajax_post():
    ansible_server = request.form.get("ansible_server")
    ansible_data = request.form.get('ansible_data')
    return "Ansible Name:[ {0} ], Ansible Data:[ {1} ]".format(ansible_server,ansible_data)
```

## html code

在 cmdb.html  中定义一个form，用于接收后端的数据

```html
       <div class="col" style="border:1px dashed #003" >
            <p class="text-center">  用户 Ajax Post 数据  </p>
           <form>
                <input type="text" class="form-control" id="ansible_server" placeholder="Ansible Server">
                <input type="text" class="form-control" id="ansible_data" placeholder="Ansible Data">
                <button type="button" id="ajax_post" class="btn btn-primary"> 发送数据给后端 </button>
            </form>
            <hr>
            返回数据结果：<div id="ajax_post_data">  </div>
        </div>
```

带上 js记得如果你用上了　template，请放在　```{% block body %} *** {% endblock %}```　之内。

```js
<script type="text/javascript">
    $(document).ready (function () {
        $("#ajax_post").click(function () {
            ansible_server = $("#ansible_server").val();
            ansible_data = $("#ansible_data").val();
            //window.alert(ansible_name+ansible_data);
            $.ajax({
                url:'/cmdb/ajax_post',
                type: 'post',
                cache: false,
                data:{
                    ansible_server: ansible_server,
                    ansible_data: ansible_data,
                },
                success:function (data) {
                    $("#ajax_post_data").html(data);
                },
            });
        });
    });
</script
```

## send data

[TOC]

---

# Ajax Post 数据

---

## define method

在 cmdb.py  中定义一个方法，用于接收前端的数据

```python
@cmdb.route('/ajax_post',methods=['get','post'])
# 这里不支持 post ，需要手动指定为 post 接收。
def ajax_post():
    ansible_server = request.form.get("ansible_server")
    ansible_data = request.form.get('ansible_data')
    return "Ansible Name:[ {0} ], Ansible Data:[ {1} ]".format(ansible_server,ansible_data)
```

## html code

在 cmdb.html  中定义一个form，用于接收后端的数据

```html
       <div class="col" style="border:1px dashed #003" >
            <p class="text-center">  用户 Ajax Post 数据  </p>
           <form>
                <input type="text" class="form-control" id="ansible_server" placeholder="Ansible Server">
                <input type="text" class="form-control" id="ansible_data" placeholder="Ansible Data">
                <button type="button" id="ajax_post" class="btn btn-primary"> 发送数据给后端 </button>
            </form>
            <hr>
            返回数据结果：<div id="ajax_post_data">  </div>
        </div>
```

带上 js记得如果你用上了　template，请放在　```{% block body %} *** {% endblock %}```　之内。

```js
<script type="text/javascript">
    $(document).ready (function () {
        $("#ajax_post").click(function () {
            ansible_server = $("#ansible_server").val();
            ansible_data = $("#ansible_data").val();
            //window.alert(ansible_name+ansible_data);
            $.ajax({
                url:'/cmdb/ajax_post',
                type: 'post',
                cache: false,
                data:{
                    ansible_server: ansible_server,
                    ansible_data: ansible_data,
                },
                success:function (data) {
                    $("#ajax_post_data").html(data);
                },
            });
        });
    });
</script
```

## send data

![](/uploads/cmdb-flask-ansible-study-notes/images/m_3b8c122ab50aa04d01042dd121fc368c_r.png)

## 验证

![](/media/202112/2021-12-21_080553_654083.png)

![](/media/202112/2021-12-21_080558_108702.png)

---

done

## 验证

![](/uploads/cmdb-flask-ansible-study-notes/images/m_33e68677a86cf834b60744f5d570ff7d_r.png)

![](/uploads/cmdb-flask-ansible-study-notes/images/m_6ea62d3939a1a46d60854dc346ce16f5_r.png)

---

done