西安企业门户网站建设,推广品牌,我想做个网站推广怎么做,视频推广平台有哪些目录
一.Ajax简介
1.特点
2.发送请求的方式
3.简介
二.Ajax引入
1.案例
后端#xff1a;
html前端#xff1a;
2.小结
#xff08;1#xff09;基本语法
#xff08;2#xff09;注意
#xff08;3#xff09;HttpResponse解决方式 一.Ajax简介
1.特点 异…目录
一.Ajax简介
1.特点
2.发送请求的方式
3.简介
二.Ajax引入
1.案例
后端
html前端
2.小结
1基本语法
2注意
3HttpResponse解决方式 一.Ajax简介
1.特点 异步提交局部刷新 动态获取用户名实时跟后端确认并将结果展示给前端 2.发送请求的方式
向后端发送请求的方式 浏览器地址直接url回车 GET请求a标签的href属性 GET请求form表单 GET请求/POST请求Ajax GET请求/POST请求
3.简介 Ajax不是新的编程语言而是一种使用现有标准的新方法类比装饰器 Ajax最大的优点就是不重新加载页面的情况下可以与服务器交换数据并更新部分网页内容 这种特点给用户的感觉就是在不知不觉中完成了请求和响应过程 AjaxAsynchronous JavaScript and XML是一种用于创建动态网页的编程技术。 它通过在网页上进行异步数据传输实现了在不重新加载整个页面的情况下更新部分页面内容的能力。 Ajax的核心技术包括使用JavaScript和XMLHttpRequest对象与服务器进行数据交互以及利用DOMDocument Object Model来动态地更新页面。 通过使用Ajax网页可以在后台与服务器进行数据交换并在不刷新整个页面的情况下根据服务器返回的数据实时更新页面的某些部分。 这种技术带来了很多好处比如提高了用户体验、减少了网络流量和服务器负载并使得开发人员能够创建更加交互和动态的网页应用程序。 虽然Ajax最初是指Asynchronous JavaScript and XML但如今已经不仅限于使用XML作为数据传输的格式而是可以使用各种格式如JSONJavaScript Object Notation。 总结起来Ajax是一种强大的前端开发技术通过异步数据传输和动态页面更新提供了更好的用户体验和交互性广泛应用于现代Web应用程序的开发中。 二.Ajax引入
1.案例
页面上有三个input框 在前面两个框输入数字点击按钮朝后端发送Ajax请求在后端计算出结果再返回给前端动态展示的第三个input框中要求 整个过程页面不能刷新也不许在前端计算
后端
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json# Create your views here.
def ab_ajax(request):if request.method POST:# print(request.POST) # QueryDict: {i1: [3], i2: [4]}num1 request.POST.get(i1) # 3 - 文本类型num2 request.POST.get(i2) # 4 - 文本类型# 强转类型并做运算sum int(num1) int(num2)# 返回数据data {message: success,sum: sum,}# 需要将数据序列化进行传输return JsonResponse(data)return render(request, ab_ajax.html)
html前端
bodyinput typetext idd1
input typetext idd2
input typetext idd3
pbutton idbtn点我/button
/pscript// 先给按钮绑定点击事件$(#btn).click(function () {// 向后端发送Ajax请求$.ajax({// 1指定发送后端的请求接口url: ,// 不写就是朝当前地址发送请求// 2请求方式type: post, // 不指定默认就是 get 全小写// 3提交数据data: {i1: $(#d1).val(), i2: $(#d2).val()},// 参数 - 会自动反序列化 传过来的数据{#dataType:true,#}// 4异步提交有一个回调函数 异步回调机制// 当后端返回结果的时候会自动触发args 会自动接受后端传过来的结果success: function (args) {{#alert(args)#}// 通过DOM操作动态数据渲染到第三个 input 框中console.log(args) // object// 经过 JsonResponse 处理过的数据传过来的是 object 对象// object 对象 可以直接 . 属性$(#d3).val(args.sum)},})})
/script/body2.小结
1基本语法
script// 先给按钮绑定点击事件$(#btn).click(function () {// 向后端发送Ajax请求$.ajax({// 1指定发送后端的请求接口url: ,// 不写就是朝当前地址发送请求// 2请求方式type: post, // 不指定默认就是 get 全小写// 3提交数据data: {i1: $(#d1).val(), i2: $(#d2).val()},// 4异步提交有一个回调函数 异步回调机制// 当后端返回结果的时候会自动触发args 会自动接受后端传过来的结果success: function (args) {{#alert(args)#}// 通过DOM操作动态数据渲染到第三个 input 框中console.log(args) // string$(#d3).val(args)},})})
/script2注意
针对后端如果是用HttpResponse返回的数据回调函数不会自动帮助我们反序列化针对后端如果是用JsonResponse返回的数据回调函数会自动帮助我们反序列化
3HttpResponse解决方式
后端先进行序列化再返回数据给前端前端加参数进行反序列化
