ajax最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页的内容
ajax指是一种创建交互式网页应用的网页开发技术,其实就是实现前后端交互。
1)ajax是异步javascript,异步的意思即非阻塞,就像线程,在代码运行到ajax请求时,它会分成两条线,一条线去运行ajax请求里面的内容,另一条线去运行主程序(即ajax请求后面的代码),当然我们可以因需要异步设置成同步(即在运行到ajax请求时,将阻塞运行完ajax请求后,再去运行ajax外,后面的代码)
2)注意ajax请求是由jquery发起的,因此用于jquery代码块中。
3)执行相应的视图函数(这里是在一个py,php等文件中创建一个视图函数,或者class类,给这个视图函数分级设置一个url地址,ajax请求中的url即填写这个完整的url地址),返回json内容。
4)执行相应的回调函数(即返回成功后的执行success里面的 js,jquery去影响web页面),通过判断 json 内容,进行相应的处理。
ajax不需要任何浏览器插件
现在我们搭建一个服务器环境,为什么要搭建服务器环境呢?因为ajax请求一般都是需要服务器调用数据库。现在这里有个比较方便的软件 -- wampserver
这个wampsever就是在window下的apache、php和mysql的服务器软件
这里我们需要安装wampsever 安装过程的具体步骤自己在百度中找教程(最好不要安装在C盘,找个内存多一点的盘安装)
在安装的文件夹中找一个www的文件夹,www文件就是网站内容所在区域 本地IP:127.0.0.1 端口号80 本地域名locolhost
在pycharm中open打开www文件,在此文件中写html,css,js,php等。
ajax要有后台服务器,可以用java,python,php搭建一个后台服务器。
写前端html文件的时候的用法:$.ajax({ })。$.ajax是所有ajax方法中最底层的方法。所有其他的方法都是基于$.ajax()方法的封装。
此方法中的参数有:(这里只写了一部分)注意都要用引号引住。
参数 | 类型 | 说明 |
url | 为string(因此要用引号引起来) | 发送请求的地址 |
type | string | 请求的方式:post或get请求。默认为get请求 |
data | Object或string | 发送服务器的数据,键值对,字符串或对象,这里post请求有此参数,get请求直接在地址处?后面传参即可 |
dataType | string | 后端返回给前端的数据类型,比如html,xml,json。本来是string,在ajax请求时设置dataType为json,将字符串;类型变为json类型 |
success | function | 请求成功后调用的回调函数,需要操作的东西一般在这里写 用法success:function(e 这个字母e可以是其他英文){写内容} 注意这个()里面的e或者说其他东西就是后端HttpResponse或者JsonResponse返回的东西,这里与dataType有关 |
error | function | 请求失败时调用的回调函数 |
async | Boolean | 是否异步处理,默认为True,false为同步处理 |
ajax操作流程步骤:
第一步:在 jquery 中 $.ajax({ 参数 等}) -- 先写好框架,例下 <script type="text/javascript">
$(function(){
$("#doisubmit").submit(function(event){ // 这里是对表单的提交
event.preventDefault() // 对表单提交的阻止
var name = $("form").find("input[name='info[truename]']").val() // 前端中要获取的值
var mobile = $("form").find("input[name='info[mobile]']").val()
var qq = $("form").find("input[name='info[qq]']").val()
var course = $("#zhuanye option:selected").html() // 这是获取对select下拉框选择哪个option标签
$.ajax({
url:"{% url 'about:jtjj' %}",
// 我要写的是一个既有get请求又有post请求的视图函数,如果之前写好了get请求,
则此时url.py文件中就有了对应的url,就直接将url写到这里
type:"post",
data:{"name":name,"mobile":mobile,"qq":qq,"course":course,"csrfmiddlewaretoken":'{{ csrf_token }}'},
dataType:"json",
success:function(re){
console.log("11111111111111111111111111")
console.log(re)
if (re.code==0){
window.location.href = "http://127.0.0.1:8000/zixun?canshu="+re.erros
}
},
error:function(e){
console.log("aaaaaaaaaaaaaaaaaaaaa")
}
})
})
})
</script>
第二步:我们发现还没有 url 的具体访问哪个地址,因此我们在 view.py 文件中写 视图函数,例如
class PythonRuXueView(View):
def get(self, request):
timus = RuXueCourse.objects.filter(course_id=1)
conn = get_redis_connection("default")
count = conn.get("pycount")if count == None:
count = 0
nn = 1
for timu in timus:
xuanxiangs = XuanXiang.objects.filter(title_id=timu.id)
timu.xuanxiangs = xuanxiangs
timu.nn = nn
nn += 1
context = {
"timus":timus,
"count":count,
}
return render(request,"ruxue_python.html",context)
def post(self,request): # 由于一般是在遇到提交form表单时
name = request.POST.get("name")
mobile = request.POST.get("mobile")
qq = request.POST.get("qq")
course = request.POST.get("course")
yanzheng = request.POST.get("")
aa = request.POST.get("aa")
ll = aa.split(",")
timus = RuXueCourse.objects.filter(course_id=1)
daanList = []
for timu in timus:
daan = DaAn.objects.filter(title_id=timu.id)[0].daan
daanList.append(daan)
a = 0
zhengque = 0
for l in ll:
if l == daanList[a]:
zhengque +=1
a += 1
print(zhengque)
if not all([name,mobile,qq]):
return JsonResponse({"code":0,"erros":"参数不完整"})
if not re.match(r'^1[3,5,7,8,9][0-9]{9}$',mobile):
return JsonResponse({"code":0,"erros": "你输入的手机号不正确"})
try:
user=PingGuPerson.objects.get(name=name,mobile=mobile,qq=qq)
except:
user = PingGuPerson.objects.create(name=name, mobile=mobile, qq=qq, course=course)
conn = get_redis_connection("default")
count = conn.get("count")if count == None:
count = 1
else:
count = int(count)
count += 1
conn.set("pycount",count)
erros = "你的入学评估检测答对 %s道,感谢您的参与" % zhengque
return JsonResponse({"code": 0, "erros":erros})
popost请求中参数data的两种写法:
1)“后端要接收的参数名=”+前端某个input的 val()或value值+“&后端要接收的参数名=”+前端的input中的值 例>>>
2)字典传参 {“后端要接收的参数名”:前端某个input的 val()或value值 ,"后端要接收的参数名":前端的input中的值 } 例>>>
注意: post请求时会触发csrf_token机制,共有三种解决方法,这里就介绍一种
第一步:在html 中写 {% csrf_token %} 注意当在浏览器右击看查看网页源代码时 {% csrf_token %}将以input标签显示。
第二步:在前端 ajax 请求之前获取它的val值, 起名 csrfmiddlewaretoken
第三步:在ajax请求的data参数中传递此参数
当你用的不是post请求时,而是用一些 put,delete 这样的请求时,上面的方法不能用
1)我们可以在后端先引入
from django.views.decorators.csrf import csrf_exempt
2)在视图中覆写父类的dispatch方法
class 创建的类名(View):
@csrf_exempt
def dispatch(self, request, *args, **kwargs):
return super(创建的类名, self).dispatch(request, *args, **kwargs)
def put或delete方法(self,request):
get请求中前端向后端传参的方法:
在post请求进行前后端数据的交换,python后端 request.POST.get(“前端给后端要接收的参数在data时起名,如上 un 和 pa ”) 接收前端的数据,当然这是对POST请求时的接收方式,get请求时,则将POST改为GET即可。
这里就是后端接收上图前端数据的方法
下图是实现前后端交互时前端需要的操作,这里还设置了同步
另外我们可以直接 $.get() 或 $.post()
先说$.get()请求 (参数之间用逗号隔开)
第一个参数:请求的接口,即要访问的地址
第二个参数:请求接口时携带的参数 可以是字典的形式传参
或者这样传参:
第三个参数:接口请求成功后的回调参数,即原本$.ajax()中的success后面的function()
第四个参数:接口返回的数据类型,即设置后端返回给前端返回的数据类型,本来不管后端返回是HttpResponse或者JsonResponse,没有前端这个参数都会显示后端返回的是字符串类型,有了这个参数,就可以使字符串变成该有的形式,比如这里写“json”,后端传的数据就变成了 json 类型
$.post()的相关用法:(跟$.get()的用法类似)
第一个参数:请求的接口,即要访问的地址
第二个参数:请求接口时携带的参数 可以是字典的形式传参
第三个参数:接口请求成功后的回调参数,即原本$.ajax()中的success后面的function()
现在我们先讲一下用php做一个后台服务器(这里为什么先讲一下用php做后台服务器呢?因为用python做后台服务器需要的东西有点多,暂且先拿php用一下)
写php文件:在www中新创建一个file文档>>>此文档以 <?php 开头 ,以 ?> 结尾。第一个注意点运行此文件时要开启wampsever软件
php有一个名句--遍地是黄金。 变量都是由$为开头的。
第一步:在php文件中获取前端传递过来的数据。这里注意在php文件中的变量名由$开头的变量名,前端是post请求则在获取的时候$_POST获取,前端是get请求则用$_GET获取(方法例下--$name=$_POST['在前端传递来的数据'])
第二步:在数据库中查询(这里先不写)
第三步:根据数据库查询的结果不同,返回给前端不同的数据。
第四个参数:接口返回的数据类型。
还有一个知识点:你发现在jquery中收集表单中的数据时,需要对每个标签$() ,这里有个快速收集表单提交的数据的方法
serializeArray()可以很方便的收集表单里面的数据 例如 这里表单有id属性可以$('input'),也可以$("#register").serializeArray()收集表单数据
收集的数据为 [{},{},...] (列表嵌套字典的形式)类型
还有一个ajax中涉及到的知识点:跨域
什么是跨域呢?比如说自己懒得弄接口了,去网上找个现成的,(比如要在前端弄个天气预报板块,自己不写后端,直接用网上免费的一些网站)。
例如 >>> 在wampserver中浏览器输入 127.0.0.1:80 和 输入localhost:80 都能打开wampserver的www文件(wampserver的首页),127.0.0.1是它的ip地址 ,localhost是它的域名。但在浏览器下访问的是127.0.0.1,而ajax请求的是localhost时,会报错。
这时我们只需在后端写下下面两个代码即可实现跨域: