1、Urls.py
url(r'^index/', views.index), url(r'^ajaxHandle/', views.ajaxHandle),
一、接下来应该给这个button按钮绑定一个事件了。用jQuery绑定事件 1、引入jQuery (1)配置静态文件
2、Index.html:
<p>用户名<input type="text" class="user"></p> <br> <button>ajax</button> <script> $(".user").blur(function () { var user=$(this).val(); $.ajax({ #语法 url:"/ajaxHandle/", #数据提交给谁 type:"GET", #提交(请求)的方式 data:{"username":user}, #向服务端发送数据(键值格式) success:function(data){ #回调函数;发送一个请求给服务端之后如果服务端成功返回了一个数据,将要执行的代码。 #date这个参数代表的是服务器端发送过来的数据。 data=JSON.parse(data); #反序列化json字符串 if (data["flag"]){ var $spans=$("<span>"); #创建一个span标签 $spans.text("用户已存在"); #给span标签添加内容 $("p").append($spans) #span标签作为子标签,追加到p标签中。 } } }) });
3、Views.py
from app01.models import * # Create your views here. import json def index(request): return render(request,"index.html") def ajaxHandle(request): if request.method=="POST": #HttpResponse.status_code=404 #老师一开始是这样写的可以试一试。代替下面两行 obj=HttpResponse("OK") #这一行和下一行都是在测试的时候用到。 obj.status_code=404 #作用:模拟遇到错误,发送状态码。 #return HttpResponse("OK") return obj username=request.GET.get("username") #user=Use.objectes.filter(username=username) ret={"flag":False} if username=="Yuan": ret["flag"]=True return HttpResponse(json.dumps(ret))
jqXHR: jQuery增强的xhr。 xmlHttprequest.
其实python中有很多事情都是围绕一个事情在做,比如loging模块围绕着一个logger对象进行操作;model围绕着model对象在做。
Ajax围绕着一个对象来做,这个对象就是:xmlHttprequest,所有的信息都可以在这个里面去拿。比如错误信息,响应的内容等都在这个里面。
//=================== error============
这个函数是在整个流程中有报错时执行
error: function (jqXHR, textStatus, err) {
// jqXHR: jQuery增强的xhr (XmlHttpRequest)
// textStatus: 请求完成状态 (要么是success要么是error)
// err: 底层通过throw抛出的异常对象,值与错误类型有关
console.log(arguments);
},
//=================== complete============
不管整个流程有没有出错,都一定要执行。
complete: function (jqXHR, textStatus) {
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态 success | error
console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
console.log('textStatus: %s', textStatus);
},
//=================== statusCode============
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments); //注意:后端模拟errror方式:
HttpResponse.status_code=500 注意,这一条指令只是测试方法,在真实环境下只有真的遇到指定的状态码,才执行这里的代码
},
'400': function () {
}
}
知识点回顾:
<script>
alert(foo(1,2,43,5,777));
function foo() {
console.log(arguments);
}
</script>