码迷,mamicode.com
首页 > Web开发 > 详细

ajax入门

时间:2018-05-01 12:30:18      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:ajax

一、json学习

1、json(Javascript  Obiect  Notation,JS对象标记)是一种轻量级的数据交换格式。

(1)python中的序列化(dumps)与反序列化(loads)

import json
ret=json.dumps({'name':'alex'})
print(ret)                #结果:{"name": "alex"}
ret=json.loads('{"name":"alex"}')
print(ret["name"])       #结果:alex


(2)JS中的序列化(stringify)与反序列化(parse)


JSON.stringify():用于将一个JavaScript对象转换为JSON字符串

JSON.parse():用于将一个JSON字符串转换为JavaScript对象


<script>
//===========js中的json的序列化=======
s2={'name':'yuan'};
console.log(JSON.stringify(s2),typeof JSON.stringify(s2))  //string
//===========js中的json反序列化===========
s = '{"name":1}';
var data = JSON.parse(s);
console.log(data);
console.log(typeof data);   //object
</script>


二、Ajax简介

1、介绍

ajax:前端向后端发送数据的一种方式

AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。


同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。


Ajax的特点:

  异步交互: 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

  局部刷新:    整个过程中页面没有刷新,只是刷新页面中的局部位置而已!


2、优点


AJAX使用Javascript技术向服务器发送异步请求;

AJAX无须刷新整个页面;

因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;


三、jQuery实现的ajax

urls.py文件内容:

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^user/valid', views.user_valid),
]


views.py文件内容:

from django.shortcuts import render,HttpResponse,redirect
from .models import *
def index(request):
    return render(request,"index.html",locals())
def user_valid(request):
    # name=request.GET.get("name")
    name=request.POST.get("name")
    ret=User.objects.filter(name=name)
    res={"state":True,"msg":""}
    if ret:
        res["state"]=False
        res["msg"]="该用户已存在"
    import json
    return HttpResponse(json.dumps(res))


index.html文件内容:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
<p>用户名:<input type="text" id="user"><span></span></p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
        $("#user").blur(function(){
                $.ajax({
                    url: "/user/valid",
                    type: "post",
                data: {
                    "name":$("#user").val(),
                    'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(),    {#防止出现404报错#}
                    },
                success: function(data){
                    var data = JSON.parse(data);
                    console.log(data);
                    console.log(typeof data);
                    if (!data.state){
                        $('.error').html(data.msg).css("color", "red");
                        // location.href="http://www.baidu.com"
                        }
                    }
                })
        })
</script>
</body>
</html>


四、cookie的简单操作

cookie实现了浏览器保存用户登录状态信息,保证了用户只需登录一次就可以,不需要每个访问页面都登录


models.py的文件内容:

from django.db import models
class User(models.Model):
    name=models.CharField(max_length=32)
    age=models.IntegerField()
class UserInfo(models.Model):
    user=models.CharField(max_length=32)
    pwd=models.CharField(max_length=32)


views.py文件内容:

from django.shortcuts import render,HttpResponse,redirect
def index(request):
    ret=request.COOKIES.get("is_login_yuan")                   #不能直接访问index路径,判断是否登录

    if not ret:
        return redirect("/login/")
    username = request.COOKIES.get("username")
    return render(request,"index.html",locals())

def login(request):
    if request.method=="POST":
        user=request.POST.get("user")
        pwd=request.POST.get("pwd")
        user=UserInfo.objects.filter(user=user,pwd=pwd).first()
        if user:
            obj=HttpResponse("登录成功")
            obj.set_cookie("is_login_yuan",True)
            obj.set_cookie("username",user.user)
            return obj                               #返回:登录成功
    return render(request,'login.html')


urls.py文件内容:

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login),
    url(r'^index/', views.index),
]


login.html文件内容:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
    用户名:<input type="text" name="user">
    密码:<input type="password" name="pwd">
    <input type="submit">
</form>
</body>
</html>




ajax入门

标签:ajax

原文地址:http://blog.51cto.com/qidian510/2109387

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!