二十一. Django----ajax全部

最新推荐文章于 2024-11-02 16:30:36 发布

aozhisui4810

最新推荐文章于 2024-11-02 16:30:36 发布

阅读量98

点赞数

文章标签： json javascript python ViewUI

原文链接：http://www.cnblogs.com/lovershowtime/p/11370755.html

版权

https://www.cnblogs.com/yuanchenqi/articles/7638956.html

https://download.csdn.net/download/baobao267/10722491 Django之Form表单验证及Ajax验证方式汇总

一. ajax--所有

 <!DOCTYPE html>
<html>
  <head>

         {%load staticfiles%}
    <meta charset="UTF-8">
    <title>form组件</title>
    <!-- <script type="text/javascript" src="/static/webpage/js/jquery1.js" ></script> -->
     <!-- 引用静态的方式-->
    <script type="text/javascript" src="{%static 'webpage/js/jquery1.js'%}" ></script>  
    <style type="text/css">
   .btn{
           display: inline-block;
           padding: 5px,10px;
           background-color:coral;
           color: blue;


   }
    </style>
  </head>

   <body>

     <!-- <form method="post" action="/myapp/upload/" enctype="multipart/form-data" method="POST">{%csrf_token%}</form> -->

        <h1>ajax深入全套学习！！！</h1>
        <h3>ajax_GET请求</h3>
        <div>
             <p> <a href="#" class="btn" οnclick="AjaxSubmit1()">ajax_JQuery GET点我</a></p> 
             <p> <a href="#" class="btn" οnclick="AjaxSubmit2()">ajax_原生GET 点我</a> </p> 
        </div>

     <br/>
    
        <h3>ajax_POST请求</h3>
        <div>
            <!-- {%csrf_token%} -->
             <p> <a href="#" class="btn" οnclick="AjaxSubmit3()">ajax_JQuery POST点我</a></p>
             <p> <a href="#" class="btn" οnclick="AjaxSubmit4()">ajax_原生GET POST</a> </p> 
        </div>

       <br/>

       
        <div>
        <h3>学习iframe伪ajax!!</h3>
                <p><input id="url" placeholder="请输入url"/>  </p>
                <p><a οnclick="Test();">查看</a>  </p>
            <p><iframe src="http://www.baidu.com" style="height:800px; width:600px" id="iframe"></iframe> </p>
        </div>
       <br/>
    
      <h3>基于iframe +Form // 学习iframe伪ajax!!</h3>
      <iframe id="iframe" name="ifra"></iframe>
      <form action="/myapp/ajax_1/" method="POST" id="fm" target="ifra">
        <input name="root" value="11111">
       <input type="submit" value="提交了ifram">
      </form>
  <script>

  
// 学习iframe伪ajax!!
function Test(){
  var url=$("#url").val();
  $("#iframe").attr("src",url);
}
// function AjaxSubmit5(){
//   document.getElementById("fm").submit();
// }


// jquery 的ajax  GET
  function AjaxSubmit1() {
     $.ajax({
         url:"/myapp/ajax_1",
         type:"GET",
         data:{"a":123},
         success:function (arg){
            console.log(arg); 
         }
     });
  };


// 原生ajax  GET
function AjaxSubmit2() {
  var xhr= new XMLHttpRequest();
  xhr.onreadystatechange=function (){
   if( xhr.readyState==4){   // 接收服务器返回的数据
      if(xhr.status==200){
       console.log(xhr.responseText);
     }else{
       console.log('ajax同步请求失败');
      }
   }
  };
  xhr.open("GET","/myapp/ajax_1?b=123456");
  xhr.send(null)
}

// jquery 的ajax  POST
  function AjaxSubmit3() {
     $.ajax({
         url:"/myapp/ajax_1",
         type:"POST",
         data:{"a":123},
         success:function (arg){
            console.log(arg); 
         }
     });
  };

// 原生ajax  POST
function  AjaxSubmit4(){
var xhr= new XMLHttpRequest();
    xhr.onreadystatechange=function (){
    if( xhr.readyState==4){   // 接收服务器返回的数据
      if(xhr.status==200){
        console.log(xhr.responseText);
     }else{
        console.log('ajax同步请求失败');
      }
   }
  };
  xhr.open("POST","/myapp/ajax_1");
  //设置请求头信息一般没有什么用但是对post有用
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
  xhr.send("d=7777777");
 }
  </script>
   </body>
</html>

from django.shortcuts import render,HttpResponse,redirect
# from .models import UserInfo
from myapp import models
# 启动服务器
# D:\04learnpython\01Web_Djang\webpython>python manage.py runserver

import os
from django.conf import settings

from django import forms
from django.forms import fields

# 显示页面
def index_ajax(request):
          return render(request,"html_app/01index_ajax.html")

# jquery-AJAX         
def ajax_1(request):
    print(request.GET)
    print(request.POST)
    print(request.body)
    return HttpResponse("OK")

from django.conf.urls import url,include
from django.contrib import admin
from .import views
urlpatterns = [
     # 上传
    url(r'^index_ajax/',views.index_ajax),
    url(r'^ajax_1/',views.ajax_1),



]

2. 上传相关的

 <!DOCTYPE html>
<html>
  <head>

         {%load staticfiles%}
    <meta charset="UTF-8">
    <title>ajax上传文件   +  jquery上传 + 原生ajax上传  + iframe的form上传</title>
    <!-- <script type="text/javascript" src="/static/webpage/js/jquery1.js" ></script> -->
     <!-- 引用静态的方式-->
    <script type="text/javascript" src="{%static 'webpage/js/jquery1.js'%}" ></script>  
    <style type="text/css">

    </style>
  </head>

   <body>
       <h1>ajax上传文件   +  jquery上传 + 原生ajax上传  + iframe的form上传</h1>
      <div>
          <h3>通过jquery上传文件！！！</h3>
          <h3> 通过data=new FormData()  上传文件 兼任性不好</h3>
          <input type="file" id="img" />
          <!-- <a class="btn" οnclick="AjaxSubmit1();">上传</a> -->
          <button class="btn" οnclick="AjaxSubmit1();">上传ajax的jquery</button>
          <button class="btn" οnclick="AjaxSubmit2();">上传ajax原生</button>
      </div>


    <br/>
    <br/>
    <br/>
    <div>
          <h3>通过iframe上传文件！！！ 兼任性最好</h3>
          <h3> 通过iframe+form上传文件</h3>
          <iframe id="iframel" name="ifral" style="display: none;"></iframe>
          <form id="fml" action="/myapp/ajax_1/" method="POST" target="ifral" enctype="multipart/form-data">
           <input type="text" name="k1">
          <!--  <input type="text" name="k2"> -->
           <input type="file" name="k3">
           <button class="btn" οnclick="AjaxSubmit3();">iframe上传文件</button>
          </form>
      </div>



  <script>
  // jquery上传
function AjaxSubmit1() {
  var data=new FormData();  // js 的创建对象   用这个上传必须用两个参数 processData:false,  contentType:false
      data.append("k1","v1");
      data.append("k2","v2");
      data.append("k3",document.getElementById("img").files[0]);
  $.ajax({
     url:"/myapp/ajax_1/",
     type:"POST",
     data:data,
     success:function (arg){
      console.log(arg)
     },
     processData:false,
     contentType:false
  })
}

// 原生ajax  Post
function AjaxSubmit2() {
  var data=new FormData();  // js 的创建对象   用这个上传必须用两个参数 processData:false,  contentType:false
      data.append("k1","v1");
      data.append("k2","v2");
      data.append("k3",document.getElementById("img").files[0]);
  var xhr= new XMLHttpRequest();
  xhr.onreadystatechange=function (){
   if( xhr.readyState==4){   // 接收服务器返回的数据
      if(xhr.status==200){
       console.log(xhr.responseText);
     }else{
       console.log('ajax同步请求失败');
      }
   }
  };
  xhr.open("POST","/myapp/ajax_1/");
  xhr.send(data)
}



// 通过iframe+form上传文件
function AjaxSubmit3() {
document.getElementById("iframel").οnlοad=rel;
document.getElementById("fml").submit();
}
function rel(){
 var content=this.contentWindow.document.body.innerHTML;
 var obj=JSON.parse(content);
     console.log(obj);
}

  </script>


   </body>
</html>

from django.shortcuts import render,HttpResponse,redirect
# from .models import UserInfo
from myapp import models
# 启动服务器
# D:\04learnpython\01Web_Djang\webpython>python manage.py runserver

import os
from django.conf import settings

from django import forms
from django.forms import fields

import json

# 显示页面
def index_ajax(request):
          return render(request,"html_app/01index_ajax.html")

# jquery-AJAX         
def ajax_1(request):
    ret={"status":True,"message":"啦啦啦啦啦啦"}
    print(request.FILES)
    print(request.POST)
    return HttpResponse(json.dumps(ret))
    # return HttpResponse("OK")

def upload_ajax(request):
          return render(request,"html_app/02upload_ajax.html")