本文介绍: 数据传输方式title=dasdas&price=2312&date=&publish=2&authors=3,k,v形式的键值传输。后端如何接收:把前端提交数据封装request.POST中,而传输文件则在request.FILES中。传输方式title=dasdas&price=2312&date=&publish=2&authors=3。提交formdata文件数据:enctype:formdata。默认的编码格式urlencodejson格式的数据提交后。

Ajax的特点

  1. 异步提交:Ajax采用异步通信方式,能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据,提升了用户体验。
  2. 无需插件:Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的,无需安装插件或控件
  3. 局部刷新:Ajax能够实现局部刷新,只更新需要更新的部分,而不是整个页面
  4. 支持多种格式数据交互:Ajax不仅支持XML格式数据交互,还支持JSON、HTML、文本等多种格式的数据交互。
  5. 提高性能:因为Ajax可以页面保留数据,只更新需要更新的部分,减少了不必要的请求响应,从而提高了网站性能。
  6. 提供多种编程语言支持:Ajax不仅支持Javascript编程,还支持其他编程语言,如PHP、ASP、Python等。
  7. 可以实现动态效果:Ajax可以用来实现动态效果,如自动补全、搜索框提示、无限滚动等。
Ajax案列

 views

from django.shortcuts import render, HttpResponse


def a_ajax(request):
    if request.method == 'POST':
        """接受ajax提交的数据"""
        print(request.POST)  # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}&gt;
        # d1 = request.POST.get('inp1')
        # d2 = request.POST.get('inp2')
        # d3 = int(d1)+int(d2)
        # print(d3)
        l_dict = {'username': 'kk', 'password': 123}
        import json
        return HttpResponse(json.dumps(l_dict))
    return render(request, 'a_ajax.html')

HTML文件

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
{#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>#}
</head>
<body>
<input type="text" id="inp1">+
<input type="text" id="inp2">=
<input type="text" id="inp3">
<button class="btn">提交</button>
</body>
</html>

<script>
    $('.btn').click(
        function() {
            var inp1 = $("#inp1").val();
            var inp2 = $("#inp2").val();
            //获取到的数据返回到后端,使用python计算

            $.ajax({
                url: '',//不写默认朝当前地址传递
                type: 'post',//默认为get
                data: {inp1: inp1, inp2: inp2},
                //回调函数用来压接受后端返回的数据
                success: function (res) {
                    console.log(res)
                    //获取值
                    {#$("#inp3").val(res)#}
                    //进行返序列化
                    //后端返回的数据别忘记返序列化,后端记得序列res = JSON.parse(res)
                    console.log(res.username)
                    console.log(res.password)


                }
            })
    })
</script>

前后端传输数据的编码格式

        我们只研究post请求方式,get没有请求方式,他的格式

get:index地址)?a=1&b=2

参数直接在url后面

post的请求方式

form表单

Ajax

api工具

1. form表单的post请求

默认的编码格式urlencode

数据的传输方式:title=dasdas&price=2312&date=&publish=2&authors=3,k,v形式的键值对传输

后端如何接收:把前端提交的数据封装到request.POST中,而传输的文件则在request.FILES中

提交form-data文件数据:enctype:form-data

传输方式:title=dasdas&price=2312&date=&publish=2&authors=3

2. Ajax提交POST请求

默认Ajax提交数据 还是在request,POST中接受,默认编码格式urlencode

需要修改的contype:json

3. Ajax提交json的格式数据

json格式的数据提交后

设置提交json格式:

                $.ajax({
                url: '',//不写默认朝当前地址传递
                type: 'post',//默认为get
                data: JSON.stringify({inp1:inp1, inp2:inp2}),
                contentType: 'application/json',
                //回调函数用来压接受后端返回的数据
                success: function (res) {
                    console.log(res)

4. Ajax提交文件数据

<script>
    $(".btn").click(function (ev) {
        console.log(123);
        // 要获取到文件数据,
        {#console.log($("#myfile")[0].files[0]) // C:fakepath123.png#}
        // 提交文件数据需要借助于formdata对象
        var myFormDataObj = new FormData;
        var username = $("#username").val();
        var myfile = $("#myfile")[0].files[0];
        myFormDataObj.append('username', username);
        myFormDataObj.append('myfile',myfile);

        $.ajax({
            url: '',
            type: 'post',
            {#data: JSON.stringify({a: 1, b: 2}), // 序列化的     "{"a":1, "b":2}"#}
            data: myFormDataObj, // 序列化的     "{"a":1, "b":2}"
            {#contentType: 'application/json', // json格式的#}
            contentType:false, // 告诉浏览器不要给我的编码格式做任何的处理
            processData: false, //
            success: function (res) {

            }
        })
    })
</script>

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

原文地址:https://blog.csdn.net/weixin_49210718/article/details/134536953

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_1951.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注