Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]

快捷API

<1>$.get(url, [data], [callback], [type])
<2>$.post(url, [data], [callback], [type])  //type: text|html|json|script
应用： 
    //请求参数应该尽量放在data参数中，因为可以自动编码，手动拼接url要注意编码问题
    function testWithDataAndCallback() {
        //$.post...
        $.get('/user/list', {type: 1}, function (data, callbacktype, jqXHR) {
            console.log(data);//将json字符串解析成json对象
        });
    }
－－－－－－－－－－－－－－
<3>$.getScript()使用 AJAX 请求，获取和运行 JavaScript:
应用：
     function testGetScript() {
            // alert(testFun(3, 4));
            $.getScript('test.js', function () {
                alert(add(1, 6));
            });
        }
    // test.js
    function add(a,b){
       return a+b
       }  
<4>$.getJSON()
与$.get()是一样的，只不过就是做后一个参数type必须是json数据了。一般同域操作用$.get()就可以，$.getJson 最主要是用来进行jsonp跨域操作的。

GET实例

$.get(url, [data], [callback], [type])

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 设置templates的路径为Django以前版本
# 'DIRS': [],      # 注释掉该行，此为Django 2.0.1最新版本
# 'django.middleware.csrf.CsrfViewMiddleware',
         ...省略默认配置
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置
# 静态资源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 现添加的配置,这里是元组，注意逗号

templates/ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<button onclick="func1()">Ajax提交</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function func1() {
        Test();
    }
    function Test() {
        # 方式一： 不传递参数
        {# $.get("/jquery_ajax_test/"); #}
        # 方式二： 拼凑参数传递
        {# $.get("/jquery_ajax_test/?name=FTL&passwd=HHH");#}     
        # 方式三   data传递参数  【name可以不带引号】
       {# $.get("/jquery_ajax_test/",{name:"HHH2020",passwd:"FTL2020"})#}
    }
</script>
</html>

mysite2/urls.py

from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
      # Jquery_Ajax
  url(r'ajax-jquery/', views.ajax_jquery),
  # jquery_ajax_test
  url(r'jquery_ajax_test/', views.jquery_ajax_test),
]

views.py

from django.shortcuts import render, HttpResponse
import datetime 
# Jquery --> ajax
def ajax_jquery(request):
    # return HttpResponse("Hello ,Jquery_ajax")
    return render(request, 'ajax_jquery.html')
# Jquery --> ajax
def jquery_ajax_test(request):
    print('request.GET', request.GET)
    return HttpResponse("Hello ,Jquery_ajax")

页面显示：

答疑：

为什么我们写的HttpResponse()没有页面显示呢？因为是Ajax请求，只是异步的局部的刷新，所以数据作为参数在我们的回调函数里面【JS处理数据】，浏览器里会有显示。我们以前的处理是刷新了页面，返回了我们一个新的页面，httpresponse的内容就显示再来网页里。

POST部分实例

$.post(url, [data], [callback], [type]) /type: text|html|json|script

案例一：

    $.post("/jquery_ajax_test/", {name:'FTL2030'})

案例二：

 $.post("/jquery_ajax_test/", {name:'FTL2050'}, function (data, stateText, obj) {
            console.log(arguments); {# 返回页面一个数组，里面包含了传递给页面的所有参数 #} 
            console.log(data);      {# 回调函数接收后台返回的参数 #}
            console.log(stateText); {# 状态码 #}
            console.log(obj);       {# 实则为xmlHttpRequest对象 #}
        })
{#            Arguments:#}
{#                0: "Hello ,Jquery_ajax"#}
{#                1: "success"#}
{#                2: Object { readyState: 4, getResponseHeader: getResponseHeader()... #}

核心API的基本使用[$.ajax]：

<1>  $.ajax的两种写法：
      $.ajax("url",{})
      $.ajax({
      url: "/ajax_jquery/",
     })
<2>  $.ajax的基本使用
     function Test() {
    $.ajax({
        url: "/jquery_ajax_test/",
        type:"POST",
        data:{ name:"FTL", age:24, school:[1,3,5] },
        {# processData:false  # 文本二进制则不需要转码所以false传递原来内容，默认true  #}
        content_type:"application/x-www-form-urlencoded",{# 传递给页面的形式，url编码 #}
        traditional:true,    {# 默认false深层次迭代，true才是我们需要的形式 #}
                        dataType:"json" ,    {# 告诉服务器端我们前台要接收符合JSON格式的数据 #}
        {# success类似回调函数，页面成功后执行的函数 #}
        success:function (data) {
            console.log(typeof data);
            console.log(data);
         }
    })

<3> 回调函数
$.ajax('/user/allusers', {
success: function (data) {
console.log(arguments);
         },
error: function (jqXHR, textStatus, err) {
             // jqXHR: jQuery增强的xhr
             // textStatus: 请求完成状态，只有success/error2个状态
             // err: 底层通过throw抛出的异常对象，值与错误类型有关
console.log(arguments);
            },

           # 不管成功失败与否，都要执行的函数就叫complete
complete: function (jqXHR, textStatus) {
             // jqXHR: jQuery增强的xhr
             // textStatus: 请求完成状态 success | error
console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
console.log('textStatus: %s', textStatus);
            },
statusCode: {
               '403': function (jqXHR, textStatus, err) {
console.log(arguments);  //注意：后端模拟errror方式：HttpResponse.status_code=500},
                '400': function () {          }
            }
        });

processData注意：默认有一个processData参数，是用来做数据转码用，如果传递二进制文件[html/视频/图片]，则不需要转码，此时只需要设置参数为false即可。

traditional注意2：默认false深层次迭代，true才是我们需要的形式

注意3：dataType:"json" 只要符合规范的JSON数据，前台均可接受

# return HttpResponse('hello')  # 错误
# return HttpResponse("hello")  # 错误
# HttpResponse只能传递字符串，所以用单引号传递了字符串
# "hello"类似于json.dumps解析[单引变双引]好了以后的json字符串[String类型]
# 只要符合JSON格式，不一定需要用JSON.dumps()来转换
return HttpResponse('"hello"')

记录一次Ajax学习

posted @ 2018-08-01 21:34 小a玖拾柒阅读(447) 评论(0) 编辑收藏举报

刷新页面返回顶部