PYTHON3.AJAX_day02

day02
回顾
1.核心对象 xhr
if(window.XMLHttpRequest){
     reyurn new XMLHttpRequest();
}else{
     return new ActiveXObject("Micosoft.XMLHTTP")
}
2.xhr 的成员
     1.方法 -open(method,url,async)
     2.属性 -readyState
         4:服务器响应完毕
     3.属性：-status
         200:服务器正确响应所有的信息
     4.属性 -responseText
     5.事件 -onreadystatechange
     6.方法 -send()
         get :null
         post:发送的数据
    **************************************************************************************    

1.使用AJAX发送POST请求
             1.创建xhr
             2.创建请求
                 1.请求方式改为post
                 2.有请求参数的话不能拼接在地址的后面
                 3.设置回调函数
                 4.设置请求消息头 - Content-Type
                     xhr.setRequestHeader(
                         "Content-Type",
                         "applocation/x-www-form-urlencoded"
                     )
                 5.发送请求
                     请求数据在send()的参数位置处
                     示例：
                         xhr.send("name=wanwc&age=20&gender=男");
        
2.json
         1.介绍json
             json:javascript object notation
                   js         对象  表现方式
             以js对象的格式前后端交互的字符串数据
         2.jso -js对象
             使用 js 对象表示一个人的信息，包含如下属性：
                 姓名：sj
                 年龄：25
                 身高：152
                 体重：100
             var obj = {
                 name:"sj",
                 age:25,
                 height:152,
                 weight:100
             }
             console.log("姓名："+obj.name);
            

   

from django.conf.urls import url
from . import views

urlpatterns = [
  # 1. 演示创建xhr
  url(r'^01-createxhr/$', views.create_views),
  # 2. 演示使用ajax发送get请求的步骤
  url(r'^02-server/$', views.server02_views),
  url(r'^02-ajax-get/$', views.ajaxget_views),
  # 3. 演示使用ajax发送get请求并附带参数
  url(r'^03-ajax-get-params/$', views.getparams_views),
  url(r'^03-server/$', views.server03_views),
  # 4. 使用 AJAX 完成注册操作
  url(r'^04-register/$',views.register_views),
  url(r'^04-checkuname/$',views.checkuname_views),
  url(r'^04-reguser/$',views.reguser_views),
  url(r'^04-regpost/$',views.regpost_views),
  # 5. 使用AJAX发送post请求
  url(r'^05-ajax-post/$',views.post_views),
  url(r'^05-server/$',views.server05_views),
  # 6. 使用AJAX读取数据
  url(r'^06-ajax-users/$',views.users_views),
  url(r'^06-server/$',views.server06_views),
  # 7. 在前端中处理JSON格式字符串
  url(r'^07-json/$',views.json_views),
]

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
from ajax.models import Users


def create_views(request):
    return render(request,'01-createxhr.html')

def server02_views(request):
    return HttpResponse("这是server02的响应内容")

def ajaxget_views(request):
    return render(request,'02-ajax-get.html')

def getparams_views(request):
    return render(request,'03-ajax-get-params.html')

def server03_views(request):
    #1. 接收前端传递过来的两个参数
    name = request.GET['name']
    age = request.GET['age']
    #2. 响应数据给前端
    s = "姓名:%s,年龄:%s" % (name,age)
    return HttpResponse(s)

def register_views(request):
  return render(request,'04-register.html')

def checkuname_views(request):
  # 1.接收前端传递过来的参数 - uname
  uname = request.GET['uname']
  # 2.判断uname在Users实体中是否存在[查询操作]
  users = Users.objects.filter(uname=uname)
  # 3.根据查询结果给出响应
  if users:
    return HttpResponse("1")
  return HttpResponse("0")

def reguser_views(request):
  # 1.接收前端传递的数据
  uname = request.GET['uname']
  upwd = request.GET['upwd']
  uemail = request.GET['uemail']
  nickname = request.GET['nickname']
  # 2.通过实体类实现增加操作(通过异常处理处理增加失败的问题)
  try:
    Users.objects.create(uname=uname,upwd=upwd,uemail=uemail,nickname=nickname)
    return HttpResponse("1")
  except Exception as ex:
    print(ex)
    return HttpResponse("0")

def post_views(request):
  return render(request,'05-post.html')


def server05_views(request):
  uname = request.POST['uname']
  upwd = request.POST['upwd']
  msg = "用户名:%s,密码:%s" % (uname,upwd)
  return HttpResponse(msg)

def regpost_views(request):
  # 1.接收前端传递的数据
  uname = request.POST['uname']
  upwd = request.POST['upwd']
  uemail = request.POST['uemail']
  nickname = request.POST['nickname']
  # 2.通过实体类实现增加操作(通过异常处理处理增加失败的问题)
  try:
    Users.objects.create(uname=uname, upwd=upwd, uemail=uemail, nickname=nickname)
    return HttpResponse("1")
  except Exception as ex:
    print(ex)
    return HttpResponse("0")

def users_views(request):
  return render(request,'06-ajax-users.html')

def server06_views(request):
  users = Users.objects.all()
  msg = ""
  for u in users:
    msg += "%s_%s_%s_%s_%s|" % (u.id,u.uname,u.upwd,u.uemail,u.nickname)
  msg = msg[0:-1]
  return HttpResponse(msg)


def json_views(request):
  return render(request,'07-json.html')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      /**
       * 为 #btnPost 绑定 click 事件
       */
      $("#btnPost").click(function(){
        //1.创建xhr
        var xhr = createXhr();
        //2.创建请求
        xhr.open("post","/ajax/05-server/",true);
        //3.设置回调函数
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4 && xhr.status == 200){
            alert(xhr.responseText);
          }
        }
        //4.设置请求消息头
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        //5.发送请求
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        // 获取csrfmiddlewaretoken的值
        var csrf = $("[name='csrfmiddlewaretoken']").val();
        var params = "uname="+uname+"&upwd="+upwd+"&csrfmiddlewaretoken="+csrf;
        xhr.send(params);
      });
    });
  </script>
</head>
<body>
  {% csrf_token %}
  <p>
    用户名称 <input type="text" id="uname">
  </p>
  <p>
    用户密码 <input type="password" id="upwd">
  </p>
  <p>
    <input type="button" id="btnPost" value="提交">
  </p>












</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnShow").click(function(){
        var xhr = createXhr();
        xhr.open("get","/ajax/06-server",true);

        xhr.onreadystatechange = function(){
          if(xhr.readyState==4 && xhr.status==200){
            var msg = xhr.responseText;
            var html = "";
            var users = msg.split("|");
            for(var i=0;i<users.length;i++){
              html += "<tr>";
              //将每个人的信息通过 _ 再一次拆分
              var infos = users[i].split('_');
              html += "<td>"+infos[0]+"</td>";
              html += "<td>"+infos[1]+"</td>";
              html += "<td>"+infos[2]+"</td>";
              html += "<td>"+infos[3]+"</td>";
              html += "<td>"+infos[4]+"</td>";
              html += "</tr>";
            }
            $("#content").html(html);
          }
        }

        xhr.send(null);
      });
    });
  </script>
</head>
<body>
  <button id="btnShow">显示</button>
  <table width="500" border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>昵称</th>
      </tr>
    </thead>
    <tbody id="content"></tbody>
  </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnJSON").click(function(){
        //1.模拟一个JSON字符串
        var flight = '{"flightNO":"NH980","from":"PEK","to":"KIX","time":"14:20"}';
        //2.通过JSON.parse()将JSON串转换成JS对象
        var obj = JSON.parse(flight);
        //console.log(obj);
        //3.解析对象
        console.log("航班号:"+obj.flightNO);
        console.log("出发:"+obj.from);
        console.log("到达:"+obj.to);
        console.log("时间:"+obj.time);
      });


      $("#btnJSONArr").click(function(){
        var str = '[{"flightNO":"NH980","from":"PEK","to":"KIX","time":"14:20"},{"flightNO":"NH979","from":"KIX","to":"PEK","time":"09:20"}]';

        var arr = JSON.parse(str);

        $(arr).each(function(i,obj){
          console.log("下标为"+i+"的元素");
          console.log("航班号:"+obj.flightNO);
          console.log("出发:"+obj.from);
          console.log("到达:"+obj.to);
          console.log("时间:"+obj.time);
        });

        /*for(var i=0;i<arr.length;i++){
          var obj = arr[i];
        }*/
      });
    });
  </script>
</head>
<body>
  <button id="btnJSON">JSON串->JS对象</button>
  <button id="btnJSONArr">JSON串->JS数组</button>
</body>
</html>