ajax post提交数据_JQuery的ajax方法简单使用

最新推荐文章于 2024-06-21 15:06:40 发布

weixin_39590868

最新推荐文章于 2024-06-21 15:06:40 发布

阅读量79

点赞数

Ⅰ ajax介绍

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
异步javascript和XML:
- 异步:跟同步是对应的
- javascript:通过javascript来操作,发送请求到服务端
- XML:数据交互使用XML,现在主流使用json格式
- XML:可阅读性比较高,解析复杂,占的空间大,标签开头,标签结尾
  - <name>wot</name>;<age>19</age>
- json:可阅读性比较高,解析简单,占用空间小
  - {"name":"wot","age":19}
浏览器页面局部刷新(js的dom操作)
通过js发送http的请求(go,java,php,request)
同步和异步
- 同步:线性操作,等待结果
- 异步:发送请求,做其他事情,结果返回再回来处理
同步交互和异步交互
- 同步交互:客户端发送一个请求后,需要等待服务器响应结束后,才能发出第二个请求
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
优点
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面

Ⅱ ajax的简单使用

原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）
jquery帮咱们封装好了一个方法 ajax，我们直接调用jquery的方法，就可以发送ajax的请求
后期，前后端分离了，还可以继续使用jquery的ajax， axios更主流一些

#  模板
    $.ajax({
        url: '/add/',  # 请求地址
        method: 'post',  # 请求方式
        data:{'a':$("#first").val() ,'b':$("#second").val() },  #  获取input标签数据
        success:function (data) {
            //成功触发
        },
        error:function (error) {
            //失败，触发
        }
    })

Ajax---->服务器------>Ajax执行流程图

通过Ajax:实现前端输入两个数字,服务器做加法,返回到前端页面
- 新建django项目,设置参数
  - 根目录建立static文件夹
  - settings.py文件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',  # 注释中间件
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static')
]  # 配置路径

- bootstrap和jquery-3.3.1本地文件复制到static文件夹下
- 设置空路径,指定index函数,返回index.html页面
- path('add/', views.add), -- 访问路径,等同js的 ajax中的url
- viwes.py文件的视图函数

def add(request):
    if request.method == 'POST':  # 判断请求是不是post
    # if request.is_ajax():    # 判断请求是不是ajax的请求
        a = int(request.POST.get('a'))   # post请求体中是数据是字符串类型,计算需转换成int类型
        b = int(request.POST.get('b'))
        return HttpResponse(a+b)

- index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wot</title>
    <script src='/static/jquery-3.3.1/jquery-3.3.1.js'></script>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body>

<input type="text" id="input_left">+<input type="text" id="input_right">=<input type="text" id="input_sum">
<button id="btn">点我有你好看</button>

<script>
    $('#btn').click(function () {
        $.ajax({
            url:'/add/',  // 向哪个地址发送请求
            method:'POST',  // 请求的方式
             // 使用jquery,获取输入框的值           
             // 向后端传输的数据没有指定编码默认使用的urlencoded             
            data:{'a':$('#input_left').val(),'b':$('#input_right').val()},  // 请求携带的数据
            success:function (data) {  // 请求成功后,执行这个函数,返回的数据赋值给data
                $('#input_sum').val(data) },  // 返回的数据就是data,将data赋值给input的值,以显示出来
            error:function (error) { 
                console.log('出错了')    }})})     // 触发失败的执行的函数
</script>
</body>
</html>

Ⅲ 上传文件

请求头ContentType
- application/x-www-form-urlencoded
- 这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=wot&age=360

- multipart/form-data
- 这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。直接来看一个请求示例：

POST http://www.mzitu.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

- application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为
请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 
之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交
的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，
仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

- 基于Form表单上传文件

<form action="/file_put/" method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="name">
    头像：<input type="file" name="avatar" id="avatar1">
<input type="submit" value="提交">
</form>

- 必须指定enctype="multipart/form-data"
- 视图函数：

def file_put(request):
    if request.method=='GET':
        return render(request,'file_put.html')
    else:
        # print(request.POST)
        # print(request.POST)
        print(request.body)  # 原始的请求体数据 
        print(request.GET)  # GET请求数据 
        print(request.POST)  # POST请求数据 
        print(request.FILES)  # 上传的文件数据
        # print(request.body.decode('utf-8'))
        print(request.body.decode('utf-8'))

        print(request.FILES)
        file_obj=request.FILES.get('avatar')
        print(type(file_obj))
        with open(file_obj.name,'wb') as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse('ok')

基于Ajax上传文件
- script设置

<h1>通过ajax上传文件</h1>
<input type="file" id='id_file'>
<hr>
<input type="text" id="id_name">
<button id='btn'>提交</button>

<script>
    $('#btn').click(function () {
        let formdata = new FormData()  // 实例化得到一个fromdata对像
        {#formdata.append('myfile','文件对象')#}  // 把文件放到对象内
        formdata.append('myfile',$('#id_file')[0].files[0])  // 拿到文件对象,有问题背下来

        // formadata 现在只有一个文件对象,里面可不可以放数据
        {#formdata.append('name','wot')#}
        formdata.append('name',$('#id_name').val())
        $.ajax({
            url:'/uploadfile/',
            method:'post',
            processData:false,  //告诉jQuery不要去处理发送的数据
            contentType:false, // 告诉jQuery不要去设置Content-Type请求头  // ajax 上传文件必须写这两句话
            data:formdata,  // # formdata内部指定了编码，并且自行处理数据
            success:function (data) {
                $('#id_name').val(data)
               //  location.href='www.mzitu.com'   // 这里不能返回页面,只能重定向,但是这里是看不到上传成功提示的
            }
        })
    })
</script>

- 视图函数

def uploadfile(request):
    file = request.FILES.get('myfile')
    name = request.POST.get('name')
    print(name)

    with open(file.name, 'wb') as f:
        for line in file:
            f.write(line)

    return HttpResponse('上传成功')

Ⅳ Ajax提交json格式数据

html页面

<h1>通过ajax提交json格式数据</h1>
<p>用户名: <input type="text" id="id_name1"></p>
<p>密码: <input type="password" id="id_password"></p>
<p><button>提交</button></p>

<srcipt>
    $('#btn_json').click(function () {
        $.ajax({
            url: '/uploadjson/',
            method: 'post',
            contentType: 'application/json',
            // data需要是json格式的字符串
            // data:{"name":"wot","password":"123456"},
            // 需要把 对象转成json格式的字符串
            // JSON.stringify(对象)
            // data:{name:$('#id_name1').val(),password:$('#id_password').val()},
            data: JSON.stringify({name: $('#id_name1').val(), password: $('#id_password').val()}),
            
            success: function (data) {
                // 返回的字符串类型,需要转成js的对象
                // 把json格式的字符串,转成对象
                // JSON.parse(json格式字符串)
                res = JSON.parse(data)
                console.log(res.status)  // 可以拿到返回的数据
                console.log(res.msg)}})})
</srcipt>

视图函数

def uploadjson(request):
    import json

    # 因为是json格式,数据在body体中
    data = request.body
    res = json.loads(data)
    print(res.get('nae'))
    print(res.get('name'))
    # request.POST.get('name')  是没有数据的

    dic = {'status':100,'msg':'成功'} # 这个字典是返回的数据,在js中通过json转换成对象
    return HttpResponse(json.dumps(dic))

weixin_39590868

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫