python学习ajax_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

Ajax提交

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"})#}

}

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学习