提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

ajax介绍详解编程语言

AJAX编程语言 详解 介绍
2023-06-13 09:11:54 时间
如果django要返回数据给ajax，则必须要用httpsponse来返回

ajax的特点：异步和局部刷新

一、javascript实现ajax 1、先看如何实现get的方法

a、先创建一个xmlrequest对象的函数，方便后面创建xmlrequest对象，这个函数的返回值就是xmlrequest对象，通过XMLHttpRequest创建对象

 function createxmlrequest() { 

 var xmlhttp = new XMLHttpRequest(); 

 return xmlhttp

b、通过调用createxmlrequest函数，接收函数的返回值，获取我们要的对象

var xmlhttp = createxmlrequest()

c、调用open函数，表明我们要和哪个url通信，通过什么方式通信

xmlhttp.open("GET","/ajax_receive/",true)

d、因为我们是用get方式，所有不需要传输数据，但是最好写一个send函数，不然有的浏览器会报错，send函数的参数搞一个null

xmlhttp.send(null)

e、调用onreadystatechange方法监听服务端的返回信息

 xmlhttp.onreadystatechange=function () { 

 alert(xmlhttp.status) 

 alert(xmlhttp.readyState) 

 if (xmlhttp.readyState == 4 xmlhttp.status == 200){ 

{# 这里的if判断一般都是写死这样的，不用关心#} 

 var data = xmlhttp.responseText; 

 alert(data)

我们看下实际的演示的代码

先看html的代码

 !DOCTYPE html 

 html lang="en" 

 head 

 meta charset="UTF-8" 

 title Title /title 

 /head 

 body 

 input type="button" value="ajax" 

 /body 

 script 

 function test() { 

 function createxmlrequest() { 

 var xmlhttp = new XMLHttpRequest(); 

 return xmlhttp 

 var xmlhttp = createxmlrequest() 

 xmlhttp.open("GET","/ajax_receive/",true) 

 xmlhttp.send(null) 

 xmlhttp.onreadystatechange=function () { 

 alert(xmlhttp.status) 

 alert(xmlhttp.readyState) 

 if (xmlhttp.readyState == 4 xmlhttp.status == 200){ 

{# 这里的if判断一般都是写死这样的，不用关心#} 

 var data = xmlhttp.responseText; 

 alert(data) 

 /script 

 /html

在url中的代码，我们上面ajax_receive这个url进行通信

urlpatterns = [ 

 url(r^admin/, admin.site.urls), 

 url(r^index/, views.index), 

 url(r^ajax_receive/, views.ajax_receive), 

 url(r^ajax_register/, views.ajax_register),

然后在看我们的视图函数，我们的视图函数返回一个“haha”

def ajax_receive(request): 

 if request.method.lower() == "post": 

 print("--------------- ",request.POST) 

 return HttpResponse("haha")

 先访问页面

ajax介绍详解编程语言

点击按钮触发ajax函数

ajax介绍详解编程语言

 拿到后台的返回数据

二、我们在下基于javascript的ajax实现POST方式

a、还是创建一个函数，这个函数用来创建xmlrequest对象，和get的方式是一样的

 function createxmlrequest() { 

 var xmlhttp = new XMLHttpRequest(); 

 return xmlhttp

b、创建对象

var xmlhttp = createxmlrequest();

c、创建要通信的url和方式

xmlhttp.open("post","/ajax_register/",true);

d、如果是post方式，这段话必须加上，放在open后面的send的前面

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

e、发送数据

xmlhttp.send("name=alex");

我们可以通过使用+号做字符串拼接。传递一个变量进去

xmlhttp.send("name="+alex)

f、还是做监听

 xmlhttp.onreadystatechange=function () { 

 alert(xmlhttp.status) 

 alert(xmlhttp.readyState) 

 if (xmlhttp.readyState == 4 xmlhttp.status == 200){ 

 这里的if判断一般都是写死这样的，不用关心 

 var data = xmlhttp.responseText; 

 alert(data)

我们在实际测试，先看下前端的html代码

 !DOCTYPE html 

 html lang="en" 

 head 

 meta charset="UTF-8" 

 title Title /title 

 /head 

 body 

 input type="button" value="ajax" 

 /body 

 script 

 function test() { 

 function createxmlrequest() { 

 var xmlhttp = new XMLHttpRequest(); 

 return xmlhttp 

 var xmlhttp = createxmlrequest(); 

 xmlhttp.open("post","/ajax_register/",true); 

 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

{# 这个必须要放在send的前面，且在open后面，设定post的请求头部的格式#} 

 xmlhttp.send("name=alex"); 

 xmlhttp.send("name="+alex) 

{# 这个意思是要传递一个变量,用+号连接#} 

 xmlhttp.onreadystatechange=function () { 

 alert(xmlhttp.status) 

 alert(xmlhttp.readyState) 

 if (xmlhttp.readyState == 4 xmlhttp.status == 200){ 

 这里的if判断一般都是写死这样的，不用关心 

 var data = xmlhttp.responseText; 

 alert(data) 

 /script 

 /html

在看url文件

urlpatterns = [ 

 url(r^admin/, admin.site.urls), 

 url(r^index/, views.index), 

 url(r^ajax_receive/, views.ajax_receive), 

 url(r^ajax_register/, views.ajax_register),

在看视图函数

def ajax_register(request): 

 if request.method == "POST": 

 username = request.POST.get("name") 

 print("------------ ",username) 

 if username == "alex": 

 return HttpResponse("same") 

 else: 

 return HttpResponse("no same") 

 else: 

 return render(request,"regiser.html")

我们实际测试，看下后台是否能接受到前台发的数据，可以看到后台可以接受到前台的数据，且可以接受到POST请求

ajax介绍详解编程语言

 至此，基于javascript实现的ajax的我们就介绍完了，后面我们重点学习基于jquery的ajax

二、插播一个js中json对象

ajax介绍详解编程语言

 ajax介绍详解编程语言

 js的字符串是双引号的，且必须是双引号，而在python，字符串可以是单引号，也可以双引号的，我们先看下面的一个例子

如果我们在视图函数中返回一个字典，我们在前端怎么才能接受到呢？

先看前端的代码

 $.post("/jquery_func/",{name:"zhouyongbo"},function (data) { 

 console.log(data) 

 console.log(typeof data)

在看视图函数

def jquery_func(request): 

 temp_dict = {"age":"zhouyongbo"} 

 if request.method == "POST": 

 print("-----------------POST--------- ",request.POST) 

 else: 

 print("-----------------GET--------- ",request.GET) 

 return HttpResponse(temp_dict)

我们前端测试，看下返回的data和type of data到底是什么，是一个字典的k和字符串，所以我们没有接受视图函数返回的字典

ajax介绍详解编程语言

 我们在修改一次视图函数的返回值，我们在视图函数中导入json模块，然后返回值用json.dumps处理

def jquery_func(request): 

 temp_dict = {"age":"zhouyongbo"} 

 if request.method == "POST": 

 print("-----------------POST--------- ",request.POST) 

 else: 

 print("-----------------GET--------- ",request.GET) 

 return HttpResponse(json.dumps(temp_dict))

看下前端的代码

 $.post("/jquery_func/",{name:"zhouyongbo"},function (data) { 

 console.log(data) 

 console.log(typeof data) 

 console.log(data["name"])

前端再次访问测试，前端确实拿到后端传的数据了，但是并我们要想要的字典，也就是js中的object，通过键值对并不能拿到key和values的值

ajax介绍详解编程语言

 其实我们还需要在前端代码中也要使用json处理处理下，具体看下代码，这个parse就相当于python中的loads

 $.post("/jquery_func/",{name:"zhouyongbo"},function (data) { 

 console.log(data); 

 console.log(typeof data); 

 data1 = JSON.parse(data); 

 console.log(data1["age"]); 

 console.log(typeof data1);

三、介绍下$.ajax方法 
{# 下面学习一下$.ajax#} 

{# 1、$.ajax有两种表现形式，也就是说有两种传参的方式，第一种就是所有的参数放在一个大括号里，第二种方式是url作为一个单独的参数，而其他的#} 

{# 所有的参数在放在一个大括号里#} 

{# #} 

{# $.ajax({#} 

{# #} 

{# })#} 

{# #} 

{# $.ajax("url",{})#} 

{# 2、下面介绍$.ajax参数#} 

{# 1、data#} 

{##} 

{# data:{#} 

{# a:23,#} 

{# b:34,#} 

{# }#} 

{# 2、url#} 

{##} 

{# 3、type#} 

 function test() { 

 $.ajax({ 

 url:"/jquery_func/", 

 type:"POST", 

 data:{ 

 name:"cuihaoran", 

{# age:{school:"hnust",add:"changsha"}#} 

 age:[12,34,56] 

 traditional:true, 

 dataType:"json", 

 success:function (data) { 

 console.log(data) 

 error:function (data) { 

 console.log(data) 

 complate:function (data) { 

 console.log(data) 


{# 如果传输的数据是这样的#} 

{# a:["a","c","c"]，则后台接受的数据就会有问题，如果有这样的情况就是就需要#} 

{# 把traditional加上,默认写上吧#} 


{# processData:false#} 

{# processData的值为true则会转码,如果为false就是不要转码，可以忘记#} 

{# })#} 

{# }#} 

 /script

ajax中的几个函数在补充一下

 function ajax() { 

 $.ajax( 

 url:"/app1/ajax/", 

 type:"POST", 

{# data:{#} 

{# a:"100",#} 

{# b:"200"#} 

{# },#} 

 data:{ 

 a:"1001", 

 b:["aaaa","bbbb"] 

 traditional:true, 

 datatye:"json", 

 success:function (data) { 

 data = JSON.parse(data) 

 console.log(data) 

 console.log(typeof data) 

 error:function () { 

 console.log(arguments) 

{# complete:function () {#} 

{# console.log(arguments)#} 

{# console.log("hahha")#} 

{# },#} 

 statusCode:{ 

 "400":function () { 

 console.log("400") 

 "500":function () { 

 console.log("500") 

 /script

ajax介绍详解编程语言

这个的意思，后端必须要要给传我传递json格式的字符串

ajax介绍详解编程语言

 这个的意思是如果这次请求和返回都成功，则执行success对应的函数

ajax介绍详解编程语言

这个的意思是如果这次请求和返回有一个失败，则执行error对应的函数

 ajax介绍详解编程语言

这个的意思是，无论成功失败与否都会执行complete对应的函数

还可以指定不同的返回码执行不同的函数

ajax介绍详解编程语言

 如果返回码是400，则执行400对应的函数，如果返回码是500.则执行500对应的函数

如果ajax需要一个json的对象，则后端返回的时候，就需要用json.dumps来处理这个对象

在前端可以用JSON,parse来处理后端返回的对象

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/20831.html

cgojavapythonxml

相关文章