Ajax操作
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax操作相关的知识，希望对你有一定的参考价值。
Ajax：
Ajax是指一种创建交互式网页应用的网页开发技术。不需要进进刷新，实现与服务器进行数据通信。Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
基于原生的javascript实现Ajax：
XmlHttpRequest对象：
XmlHttpRequest对象的主要方法：
void open(String method,String url,Boolen async)
用于创建请求
参数：
method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型）
void send(String body)
用于发送请求
参数：
body： 要发送的数据（字符串类型）
void setRequestHeader(String header,String value)
用于设置请求头
参数：
header： 请求头的key（字符串类型）
vlaue： 请求头的value（字符串类型）
String getAllResponseHeaders()
获取所有响应头
返回值：
响应头数据（字符串类型）
String getResponseHeader(String header)
获取响应头中指定header的值
参数：
header： 响应头的key（字符串类型）
返回值：
响应头中指定的header对应的值
XmlHttpRequest对象的主要属性：
a. Number readyState
状态值（整数）
详细：
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据；
b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数（回调函数）
c. String responseText
服务器返回的数据（字符串类型）
d. XmlDocument responseXML
服务器返回的数据（Xml对象）
e. Number states
状态码（整数），如：200、404...
f. String statesText
状态文本（字符串），如：OK、NotFound...
程序：
（1）GET方式请求：
客户端：
<body>
<input type="text" />
<input type="button" value="Ajax1" onclick="Ajax1();" />
<script>
function Ajax1(){
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open(‘GET‘,‘/ajax_json/‘,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){// 接收完毕
var obj = JSON.parse(xhr.responseText); console.log(obj)
}
};
xhr.setRequestHeader(‘k1‘,‘v1‘); // 设置数据头
xhr.send("name=root;pwd=123");
}
</script>
</body>
服务器端：
def ajax_json(request):
print(request.GET)
ret = {‘code‘:True, ‘data‘:None}
import json
return HttpResponse(json.dumps(ret),status=404,reason=‘Not Found‘) # 定义状态码及状态信息
return HttpResponse(json.dumps(ret))
（2）POST方式请求
客户端：
<body>
<input type="text" />
<input type="button" value="Ajax1" onclick="Ajax1();" />
<script>
function Ajax1(){
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open(‘GET‘,‘/ajax_json/‘,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){// 接收完毕
var obj = JSON.parse(xhr.responseText); console.log(obj)
}
};
xhr.setRequestHeader(‘k1‘,‘v1‘); // 设置数据头
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
xhr.send("name=root;pwd=123");
}
</script>
</body>
基于jquery实现：
function add_student_byajax() {
$(‘#ajax_add‘).click(function () {
//获取要发送的数据
var sel = $(‘#sel‘).val();
var id = $(‘form‘).find(‘input[name="id"]‘).val();
var name = $(‘form‘).find(‘input[name="name"]‘).val();
var gender = $(‘form‘).find(‘input[name="gender"]‘).val();
var age = $(‘form‘).find(‘input[name="age"]‘).val();
var email = $(‘form‘).find(‘input[name="email"]‘).val();
$.ajax({
url:‘/app/add_student/‘,//设置url
type:‘POST‘,//设置发送的方式
dataType:‘JSON‘,//设置要接收的数据类型
data:{//设置要传送的数据
name:name,
age:age,
gender:gender,
email:email,
cls:sel,
id:id
},
success:function (obj){//执行成功后执行的回调函数，obj为服务器端返回的数据对象
if(!obj.status){
$(‘#er‘).text(obj.error)
}else {
location.href=‘/app/student/‘;
}
}
})
})
}
服务器端：
def add_student(request):
if request.method ==‘GET‘:
print(234)
return HttpResponse(‘ok‘)
elif request.method == ‘POST‘:
data={
‘status‘:True,
‘data‘:None,
‘error‘:None
}
name = request.POST.get(‘name‘)
age = request.POST.get(‘age‘)
gender = request.POST.get(‘gender‘)
email = request.POST.get(‘email‘)
cls = request.POST.get(‘cls‘)
nid = request.POST.get(‘id‘)
data[‘status‘]=True
models.Student.objects.create(name=name, age=age, gender=gender, email=email, cls_id=cls)
return HttpResponse(json.dumps(data))
以上是关于Ajax操作的主要内容，如果未能解决你的问题，请参考以下文章