ajax页面参数序列化,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'); // 1

Ajax

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

Titletitle>

head>

提交button>

$("#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

Titletitle>

head>

提交button>{% csrf_token %}$("#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)

或者如下的方式：

$.ajax({

headers:{"X-CSRFToken":$.cookie('csrftoken')},

})

$.ajaxSetup({

data:{csrfmiddlewaretoken: '{{ csrf_token }}'},

});

serialize序列化

不在标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

$("button").click(function(){

$("div").text($("form").serialize());

});

});script>

head>

First name:

Last name:

form>

序列化表单值button>

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页面

Titletitle>

head>

姓名：label>

span>

p>

密码：label>

span>

p>

{% csrf_token %}{##校验姓名#}$("#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")