分享web开发知识

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

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

Django之原生Ajax操作

发布时间:2023-09-06 01:58责任编辑:傅花花关键词:Ajax

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。

先通过代码来看看Ajax吧!

views.pyfrom django.shortcuts import render,redirect,HttpResponsefrom django import ?formsfrom django.forms import fieldsfrom app_01 import modelsdef ajax(request): ???return render(request, ‘ajax.html‘)def ajax_json(request): ???import time ???time.sleep(3) ???print(request.POST) ??#打印request.POST内的内容 ???ret = {‘code‘: True , ‘data‘: request.POST.get(‘username‘)} ???import json ???return HttpResponse(json.dumps(ret)) ????#向前台发送ret,利用json.dumps()将ret变为字符串
ajax.html<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<input type="text"/> ???<input type="button" value="Ajax1" onclick="Ajax1();" /><form action="/ajax_json/" method="POST" > ???????<input type="text" name="username" /> ???????<input type="text" name="email" /> ???????<input type="submit" onclick="sumitForm();" value="Form提交"/> ???</form><script type="text/javascript" src="/static/jquery-1.12.4.js"></script> ???<script>function Ajax1(){ ???????????var xhr = getXHR(); ???????????//var xhr = new XMLHttpRequest(); ????????//创建XMLHttpRequest对象 ???????????xhr.open(‘POST‘, ‘/ajax_json/‘,true); ?//指定用post发,发送到ajax_json里,是否异步为true,默认不填也为true ???????????xhr.onreadystatechange = function(){ ????//onreadystatechange为回调函数,当匿名函数内的状态发生变化时就会执行,每一次都会执行 ???????????????if(xhr.readyState == 4){ ????????????//一共5个状态,当状态为4时,启动使其发生变化 ???????????????????// 接收完毕 ???????????????????var obj = JSON.parse(xhr.responseText); //responseText为返回值,返回html的返回值 ???????????????????console.log(obj); ???????????????} ???????????}; ???????????xhr.setRequestHeader(‘k1‘,‘v1‘); ??//发送GET请求头,利用csrf时使用 ???????????xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘); ?//发送post请求时 ???????????xhr.send("name=root;pwd=123"); ??//发送数据,发送的只能是字符串 ???????}</script></body></html>

点击Ajax1,可以看到请求已经发送过去

xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘); ?//发送post请求时xhr.send("name=root;pwd=123"); ??//发送数据,发送的只能是字符串

通过这两行代码,可以知道已经向后台发送了请求

看完这些代码,就差不多知道原生ajax是怎么发送请求的了吧!

那下面就说说原生ajax的方法和属性

1、XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法:

a. void open(String method,String url,Boolen async)   用于创建请求       参数:       method: 请求方式(字符串类型),如:POST、GET、DELETE...       url:    要请求的地址(字符串类型)       async:  是否异步(布尔类型) b. void send(String body)    用于发送请求     参数:        body: 要发送的数据(字符串类型) c. void setRequestHeader(String header,String value)    用于设置请求头     参数:        header: 请求头的key(字符串类型)        vlaue:  请求头的value(字符串类型) d. String getAllResponseHeaders()    获取所有响应头     返回值:        响应头数据(字符串类型) e. String getResponseHeader(String header)    获取响应头中指定header的值     参数:        header: 响应头的key(字符串类型)     返回值:        响应头中指定的header对应的值 f. void abort()     终止请求

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...

2、跨浏览器支持

XmlHttpRequest
  ·IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
  ·IE6, IE5

Django之原生Ajax操作

原文地址:https://www.cnblogs.com/zhuifeng-mayi/p/9131727.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved