Ajax-get\post请求、serialize序列化
-
-
- json格式
- stringify与parse
- Ajax
- GET方式
- POST方式
- serialize序列化
- 案例
-
json格式
合格的json对象：
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]不合格的json对象：
{ name: "张三", 'age': 32 } // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined } // 不能使用undefined
{ "name": "张三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函数和日期对象
}stringify与parse
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ; // 错误
console.log(JSON.parse('[12,undefined]')) ; // 错误
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
eg: console.log(JSON.stringify({'name':"egon"})) ; JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null
JSON.parse('1'); // 1Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
GET方式
url如下
url(r'^login/$',views.login ),
url(r'^safly/$',views.safly ),视图函数如下：
view.py
from django.shortcuts import render, redirect, HttpResponse, reverse
def login(request):
return render(request, "login.html")
def safly(request):
username = request.GET.get("username")
pwd = request.GET.get("pwd")
if username == "safly" and pwd == "123":
res = username + pwd
return HttpResponse(res)login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titletitle>
<script src="/static/js/jquery-3.2.1.min.js">script>
head>
<body>
<input type="text">
<button id="id_btn">提交button>
<script>
$("#id_btn").click(function () {
$.ajax({
url: "/safly/",
type: "GET",
data: {username: "safly", pwd: "123"},
success: function (data) {
console.log(data)
}
})
})
script>
body>
html>我们测试如下：
点击提交按钮，控制台输出
[30/Jan/2018 17:44:37] "GET /safly/?username=safly&pwd=123 HTTP/1.1" 200 8浏览器输出
safly123以上data改成data: {“username”: “safly”, pwd: “123”},也可以
会自动给转换成json格式的类型
POST方式
如果将上例中的type改成type: “POST”,
按着之前的流程会报错如下：
Forbidden (CSRF token missing or incorrect.): /safly/我们需要进行添加csrf参数
login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titletitle>
<script src="/static/js/jquery-3.2.1.min.js">script>
head>
<body>
<input type="text" id="input_text">
<button id="id_btn">提交button>
{% csrf_token %}
<script>
$("#id_btn").click(function () {
$.ajax({
url: "/safly/",
type: "POST",
data: {
"username": "safly",
pwd: "123",
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
},
success: function (data) {
var data = JSON.parse(data)
console.info(data.is_regist)
if (data.is_regist) {
$("#input_text").val("已经注册")
}
}
})
})
script>
body>
html>
views.py
from django.shortcuts import render, redirect, HttpResponse, reverse
def login(request):
return render(request, "login.html")
def safly(request):
username = request.POST.get("username")
pwd = request.POST.get("pwd")
response={"is_regist":True}
if username == "safly" and pwd == "123":
pass
else:
response["is_regist"] = False
import json
response = json.dumps(response)
return HttpResponse(response)
或者如下的方式：
<script src="{% static 'js/jquery.cookie.js' %}">script>
$.ajax({
headers:{"X-CSRFToken":$.cookie('csrftoken')},
})$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});serialize序列化
不在标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
script>
head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
form>
<button>序列化表单值button>
<div>div>
body>
html>
结果如下：
案例
先来看login页面
url(r'^login/$', views.login, name="login"),from django.shortcuts import render, redirect, HttpResponse, reverse
from . import models
def login(request):
return render(request, "login.html")直接渲染login.html页面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titletitle>
<script src="/static/js/jquery-3.2.1.min.js">script>
head>
<body>
<p>
<label for="name">姓名：<input type="text" name="name" id="name">label>
<span id="name_span">span>
p>
<p>
<label for="pwd">密码：<input type="text" name="pwd" id="pwd">label>
<span id="pwd_span">span>
p>
<input type="button" value="注册" id="btn_sumit">
{% csrf_token %}
<script>
{##校验姓名#}
$("#name").blur(function () {
$.ajax({
url: "/validate/",
type: "GET",
data: {name: $("#name").val()},
success: function (data) {
var data = JSON.parse(data)
console.info(data)
if (data.is_regist) {
{#已经注册#}
$("#name_span").html(data.name + "已经注册").css("color", "red")
} else {
{#没有注册#}
$("#name_span").html(data.name + "可以使用").css("color", "black")
}
}
})
})
{#校验密码#}
$("#btn_sumit").click(function () {
$.ajax({
url: "/register/",
type: "POST",
data: {
name: $("#name").val(),
pwd: $("#pwd").val(),
csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()
},
success: function (data) {
console.info(data)
if(data == "ok"){
window.location.href="/index/"; //在同当前窗口中打开窗口
}
}
})
})
script>
body>
html>
校验姓名
url(r'^validate/$', views.validate, name="validate"),def validate(request):
my_name = request.GET.get("name")
user = models.User.objects.filter(name=my_name)
response_dic = {"name":my_name,"is_regist":False}
if user:
response_dic["is_regist"] = True
response_dic["name"] = user[0].name
import json
data = json.dumps(response_dic)
print(data)
#字符串
return HttpResponse(data)
注册利用ajax,不用form
url(r'^register/$', views.register, name="register"),
url(r'^index/$', views.index, name="index"),def register(request):
if request.method == "POST":
name = request.POST.get("name")
pwd = request.POST.get("pwd")
print(name,"------",pwd)
models.User.objects.create(name=name,pwd=pwd)
return HttpResponse("ok")
def index(request):
return render(request,"index.html")