AJAX在网页上的应用

最新推荐文章于 2024-06-01 15:11:31 发布

xuehan_126

最新推荐文章于 2024-06-01 15:11:31 发布

阅读量389

点赞数

本文链接：https://blog.csdn.net/xuehan_126/article/details/80919024

版权

1.Ajax是异步的JavaScript和XML，它是利用JavaScript在保证页面不被刷新、页面链接不改变
的情况下与服务器交换数据并更新部分网页的技术
    AJAX请求网页更新一般分为以下三种情况：
        a）发送请求。
        b）解析内容。
        c）渲染网页。
    下面给出代码：
        var xmlhttp;
        if (window.XMLHttpRequest){
        //一般可用浏览器为火狐、sari、Chrome等
        } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");       // 新建一个xmlhttp对象
        }
        xmlhttp.onreadystatechange=function() {         // 调用onreadystatechange属性设置监听
            if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST","/ajax",True);
        xmlhttp.send();

在网页中的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
<form>
    <input name="name" placeholder="用户名"><br>
    <input name="phone" placeholder="手机号"><br>
    <button type="button" οnclick="addUser()">添加</button>
</form>
<hr>
<div>
    <ul id="userdata"></ul>
</div>

                }
            }
        })
    })
    function addUser() {
        $.ajax('/user/',{
            type: 'POST', //请求类型
            data: $('form').serialize(), //$选择form表单的数据
            dataType: 'json', //响应的数据类型
            success: function (data) {
                // data -> {state:'ok',msg:'添加成功'}
                alert(data.msg);
            }
        })
    }
</script>

</body>
</html>

在后台的代码

from flask import request
from flask_restful import Api, Resource

api = Api()

def init_api(app):
api.init_app(app)

class UserApi(Resource):    # 声明UserApi资源
    def get(self):
        return {'state':'ok', 'data':[{"name":"disen","age":20},
                                     {"name":"jack","age":12}]}
# api.add_resource(UserApi, '/user/')

    def post(self):
        name = request.form.get('name')
        phone = request.form.get('phone')
        print(name, phone)
        return {"state":"ok",
                "msg":"添加 {} 成功".format(name)}
api.add_resource(UserApi, '/user/')