Ajax发送post请求

最新推荐文章于 2023-06-25 21:57:14 发布

python_god

最新推荐文章于 2023-06-25 21:57:14 发布

阅读量2.9k

点赞数 3

分类专栏： ajax 文章标签： ajax post请求 python

本文链接：https://blog.csdn.net/weixin_45179798/article/details/97107742

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax的post请求

使用Ajax发送POST请求

创建xhr
创建请求
1.将请求方式更改为post
2.如果有请求参数不能拼在url之后
设置回调函数

设置请求消息头

xhr.setRequestHeader("Content-Type","application/x-		www-form-urlencoded")

发送请求
```
xhr.send("name=xxx&age=30");
```
示例
url.py 路由参考

    # 使用ajax发送POST请求
    url(r"^05-ajax-post/$", views.post_views),
    url(r"^05-server/$", views.server05_views),

view.py 视图处理函数

	def post_views(request):
	    return render(request, 'Ajax/05-post.html')
	
	
	def server05_views(request):
	    uname = request.POST["uname"]
	    upwd = request.POST["upwd"]
	    msg = "用户名:%s,密码:%s" % (uname, upwd)
	    return HttpResponse(msg)

html 和js处理
Ajax/05-post.html 文件
{% csrf_token %} 处理 csrf

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 创建异步对象
        function createXhr() {

            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
                //console.log(xhr);
                console.log('浏览器支持: XMLHttpRequest')
            } else {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                //console.log(xhr);
                console.log('浏览器支持ActiveXObject("")')
            }
            return xhr
        }


    </script>
    <script src="/static/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            /**
             * 为 #btnPost 绑定 click 事件
             */
            $("#btnPost").click(function () {
                //1.创建xhr
                var xhr = createXhr();
                //2.创建请求
                xhr.open("post", "/ajax/05-server/", true);
                //3.设置回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        alert(xhr.responseText);
                    }
                }
                //4.设置请求消息头
                xhr.setRequestHeader(
                    "Content-Type",
                    "application/x-www-form-urlencoded"
                );
                //5.发送请求
                var uname = $("#uname").val();
                var upwd = $("#upwd").val();
                // 获取csrfmiddlewaretoken的值
                var csrf = $("[name='csrfmiddlewaretoken']").val();
                var params = "uname=" + uname + "&upwd=" + upwd + "&csrfmiddlewaretoken=" + csrf;
                xhr.send(params);
            });
        });
    </script>
</head>
<body>
{% csrf_token %}
<p>
    用户名称 <input type="text" id="uname">
</p>
<p>
    用户密码 <input type="password" id="upwd">
</p>
<p>
    <input type="button" id="btnPost" value="提交">
</p>


</body>
</html>

效果样式
在这里插入图片描述

python_god

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Ajax发送post请求

Ajax的post请求使用Ajax发送POST请求创建xhr创建请求1.将请求方式更改为post2.如果有请求参数不能拼在url之后设置回调函数设置请求消息头xhr.setRequestHeader("Content-Type","application/x- www-form-urlencoded")发送请求xhr.send("name=xxx&amp...
复制链接

扫一扫