当前位置：首页 > Web开发 > 正文

$(#i1)[0].files[0]); // 获取input框内部用户上传的文件对象// 发送ajax请求$.ajax

2024-03-31 Web开发

Ajax并不是一门新的语言，它其实就是基于js写的一个成果模块。使用JavaScript语言与处事器进行异步交互，，传输数据为XML。

AJAX最大的长处是在不从头加载整个页面的情况下，可以与处事器交换数据并更新部分网页内容。

同步交互：客户端发出一个请求后，需要期待处事器响应结束后，才华发出第二个请求

异步交互：客户端发出一个请求后，无需期待处事器响应结束，就可以发出第二个请求

AJAX常见应用情景：

用于注册的时候用户名的查重，当文本框产生了输入变革时，使用AJAX技术向处事器发送一个请求，然后处事器会把盘问的功效响应给浏览器，最后再把后端返回的功效展示出来。通过异步回调机制callback()拿到任务的功效。

整个过程页面没有刷新，只是刷新页面中的局部位置

当请求发出后，浏览器还可以进行其他操纵，无需期待处事器的响应

技术图片

长处：

局部刷新

异步请求

由于原生js书写ajax较为繁琐，所以我们直接使用jQuery封装好的ajax模块操纵，因此需要下载jQuery。

Ajax根基语法布局 // ajax根基语法 $.ajax({ // 1.指定朝阿谁后端提交数据，默认不写是朝当前页面的后端提交 url:'', // 控制数据的提交路径有三种写法跟form表单的action属性一致 // 2.指定当前请求方法 type:'post', // 3.提交的数据 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, // 4.ajax是异步提交所以需要给一个回调函数来措置惩罚惩罚返回的功效 success:function (data) { // data就是异步提交的返回功效 // 将异步回调的功效通过DOM操纵衬着到第三个input框中 $('#i3').val(data) } }) 第一个AJAX案例

案例:页面上有三个input框一个按钮
用户在前两个框中输入数字点击按钮保证页面不刷新的情况下将数据发到后端做计算
将计算好的功效再发给前端展示到第三个input框中

# urls.py url(r'^index/', views.index) # views.py def index(request): if request.method == 'POST': i1 = request.POST.get('i1') i2 = request.POST.get('i2') i3 = int(i1) + int(i2) print(i3) return HttpResponse(i3) return render(request, 'index.html') # index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script src=http://www.mamicode.com/"https:/cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href=http://www.mamicode.com/"https:/cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src=http://www.mamicode.com/"https:/cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="d1">按钮</button> <script> $('#d1').click(function () { $.ajax({ url: '', type: 'post', data: {'i1': $('#i1').val(), 'i2': $('#i2').val()}, success: function (data) { $('#i3').val(data) } }) }) </script> </body> </html> Content-Type前后端传输数据编码格局

urlencoded：

数据格局 username=jason&password=123

是form表单和ajax默认的编码格局

django后端针对切合该格局的数据城市自动解析并放到request.POST中

post和get使用URLencode转码，post格局和get格局的区别在于，get把转换，拼接完的字符串用‘？’直接跟在url后面，所以请求体中没有数据；而post把转换、拼接后的字符串放在了请求体里，不会在浏览器的地点栏显示，因为更安适一些。

formdata：

既可以发送文件也可以继续发送普通键值对

django后端会将该编码格局中切合username=jason&password=123格局数据还是放到request.POST中

而针对文件数据则会解析放到request.FILES

application/json：

传输数据格局要与编码格局连结一致

form表单：

默认是urlencoded编码格局传输数据

urlencoded数据格局

username=jason&password=123

django后端针对该格局的数据，会自动解析并帮你打包到request.POST中

formdata数据格局

django后端针对切合urlencoded编码格局数据还是统一解析到request.POST中

而针对formdata文件数据就会自动解析放到request.FILES中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=http://www.mamicode.com/"https:/cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href=http://www.mamicode.com/"https:/cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src=http://www.mamicode.com/"https:/cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> {#<form action="" method="post" enctype="multipart/form-data">#} {# <input type="text" name="username">#} {# <input type="text" name="password">#} {# <input type="file" name="myfile">#} {# <input type="submit">#} {#</form>#} {##} {#<button id="d1">点击发送ajax请求</button>#} {##} {##} {#<button id="d2">ajax发送json格局数据</button>#} <input type="file" name="myfile" id="i1"> <button id="d3">ajax发送文件数据</button> <script> $('#d1').click(function () { $.ajax({ url:'', type:'post', data:{'username':'jason','password':123}, success:function (data) { alert(data) } }) }) </script> </body> </html> Ajax发送json格局数据

ajax默认的也是urlencoded编码格局

前后端数据交互，编码格局要与数据格局必然要一致

application/json

django后端针对json格局数据并不会做任何的措置惩罚惩罚，而是直接放到request.body中

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30356.html

上一篇：标签： 1.在web.xml中设置以下代码:welcome-file-listwelcome-filelogin.js
下一篇：1：东西、结构函数、函数（要领）

$(#i1)[0].files[0]); // 获取input框内部用户上传的文件对象// 发送ajax请求$.ajax

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢