分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > IT知识

Ajax

发布时间：2023-09-06 01:53责任编辑：郭大石关键词：Ajax

Ajax即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术,AJAX = 异步JavaScript和XML（标准通用标记语言的子集）,AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

-----传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面；

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

Ajax工作原理：

1. 基本参数

$.ajax，这个是JQuery对ajax封装的最基础步骤，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

1
2
3
4
5
6
7
8
9
10
11
var configObj={
method//数据的提交方式：get和post
url//数据的提交路径
async//是否支持异步刷新，默认是true
data//需要提交的数据
dataType//服务器返回数据的类型，例如xml,String,Json等
success//请求成功后的回调函数
error//请求失败后的回调函数
}
$.ajax(configObj);//通过$.ajax函数进行调用。

2. 实例分析

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
url:‘/host‘,//数据提交地址
type:"POST",//提交类型
data: {‘k1‘:123,‘k2‘:"root"},//提交的内容 字典格式
success: function(data){　　　　//客户端会一直等待服务端返回的数值
//data是服务器端返回的字符串
var obj=JSON.parse(data);
}
})
建议：永远让服务器端返回一个字典
returnHttpResponse(json.dumps(字典))

3. 简单的前后端交互

Ajax代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function(){
$(‘#ajax_submit‘).click(function () {
$.ajax({
url:"/test_ajax/",
type:"POST",
data:{‘hostname‘:$(‘#host‘).val(),‘ip‘:$(‘#ip‘).val(),‘port‘:$(‘#port‘).val(),‘b_id‘:$(‘#sel‘).val()},
success:function (data) {
if(data==‘OK‘){
location.reload()//重新加载页面
}else{
alert(data);
}
}
})
})
})
Django代码：
1
2
3
4
5
6
7
8
9
10
11
12
deftest_ajax(request):
print(request.method)
h=request.POST.get(‘hostname‘)
i=request.POST.get(‘ip‘)
p=request.POST.get(‘port‘)
b=request.POST.get(‘b_id‘)
print(h,i,p,b)
ifhandlen(h) >5:# 主机名长度判断
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)# 创建数据
returnHttpResponse("OK")　　　　# 返回OK 严格大小写
else:
returnHttpResponse("主机名太短")　　# 返回错误提示
4.对前后端交互完善（当后端有问题时，前端收不到data，页面无反应）
Ajax代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
$(‘#ajax_submit‘).click(function () {
$.ajax({
url:"/test_ajax/",
type:"POST",
data:{‘hostname‘:$(‘#host‘).val(),‘ip‘:$(‘#ip‘).val(),‘port‘:$(‘#port‘).val(),‘b_id‘:$(‘#sel‘).val()},
success:function (data) {
console.log(data)//data {"data": null,"status": false,"error":"\u4e3b\u673a\u540d\u592a\u77ed"}
var obj=JSON.parse(data);//反序列化 把字符串data换成对象obj
//序列化 JSON.stringify() 把obj转换为字符串
if(obj.status){
location.reload()//重新加载页面
}else{
$(‘#error_msg‘).text(obj.error)
}
}
})
})
})
Django代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
importjson
deftest_ajax(request):
ret={‘status‘:True,‘error‘:None,‘data‘:None}# 返回一个字典
try:
h=request.POST.get(‘hostname‘)
i=request.POST.get(‘ip‘)
p=request.POST.get(‘port‘)
b=request.POST.get(‘b_id‘)
print(h,i,p,b)
ifhandlen(h) >5:# 主机名长度
print("ok")
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)
else:
ret[‘status‘]=False
ret[‘error‘]=‘主机名太短‘
exceptException as e:
ret[‘status‘]=False
ret[‘error‘]=‘请求错误‘
return	
	

	


	
知识推荐
	


  
我的编程学习网——分享web前端后端开发技术知识。  垃圾信息处理邮箱 tousu563@163.com   网站地图

  icp备案号 闽ICP备2023006418号-8
  不良信息举报平台 
  互联网安全管理备案
  Copyright  2023 www.wodecom.cn All Rights Reserved