js和jQuery实现的Ajax
1. JS实现Ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > <meta http - equiv = "X-UA-Compatible" content = "ie=edge" > <title>Document< / title> < / head> <body> <button type = "submit" id = "js_ajax_test" >Ajax测试< / button> <script> var js_ajax_test = document.getElementById( "js_ajax_test" ); js_ajax_test = function () { var xmlHttp = new XMLHttpRequest(); xmlHttp. open ( "POST" , "/js_ajax_test/" , true); xmlHttp.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" ); xmlHttp.send( "username=yang&password=123" ); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState = = = 4 && xmlHttp.status = = = 200 ){ alert(xmlHttp.responseText) } } } < / script> < / body> < / html> |
2. jQuery实现的Ajax
最基本的jQuery发送Ajax请求示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html> <html lang = ""> <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > <meta http - equiv = "X-UA-Compatible" content = "ie=edge" > <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.js" >< / script> <title>ajax test< / title> < / head> <body> <button id = "ajaxTest" >AJAX测试< / button> <script> $( "#ajaxTest" ).click(function () { $.ajax({ url: "/ajaxTest/" , type : "POST" , data: {username: "yang" , password: 123 }, success: function (data) { alert(data) } }) }) < / script> < / body> < / html> |
views.py
1 2 3 4 5 6 7 | def ajax_test(request): return render(request, "ajax_test.html" ) def ajaxTest(request): username = request.POST.get( "username" ) password = request.POST.get( "password" ) return HttpResponse( "用户名:{} 密码:{}" . format (username, password)) |
urls.py
1 2 3 4 5 6 7 8 9 | from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r '^admin/' , admin.site.urls), url(r '^ajax_test/' , views.ajax_test), url(r '^ajaxTest/' , views.ajaxTest) ] |
3. Ajax中使用JSON
data参数中的键值对,如果值不为字符串,需要将其转换成字符串类型。
如果没有转换为字符串,那么views中的代码就接收不到password的值。
1 2 3 4 5 6 7 8 9 10 11 12 | <script> $( "#ajaxTest" ).click(function () { $.ajax({ url: "/ajaxTest/" , type : "POST" , data: {username: "yang" , password:JSON.stringify([ 1 , 2 , 3 ])}, success: function (data) { alert(data) } }) }) < / script> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!