使用原生的JS实现查询
- 根据ID查询(getElementById)
- 根据class查询(getElementsByClassName)
- 根据标签查询(getElementsByTagName)
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" name="username" id="username">
<p class="area city">广州</p>
<p>深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
<script type="text/javascript">
// 根据id查询
var username = document.getElementById('username');
console.log(username)
// 根据ID查询
var areaList = document.getElementsByClassName('area');
console.log(areaList)
// 根据标签查询
var pList = document.getElementsByTagName('p');
console.log(pList);
</script>
</body>
</html>
实现jQuery的id选择器
示例代码
var $ = function(id){
return document.getElementById('id');
}
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" name="username" id="username">
<p class="area city">广州</p>
<p>深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
<script type="text/javascript">
// 根据id查询
var username = document.getElementById('username');
console.log(username)
// 根据ID查询
var areaList = document.getElementsByClassName('area');
console.log(areaList)
// 根据标签查询
var pList = document.getElementsByTagName('p');
console.log(pList);
// 实现自己的jQuery中的id选择器
var $ = function(id){
return document.getElementById(id)
}
// function $(id){
// return document.getElementById(id)
// }
console.log($('username'))
</script>
</body>
</html>
利用jquery-3.5.1.min.js查询
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器的练习</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// jQuery代码的内容
// 根据ID
var username = $('#username');
console.log(username);
//根据class来查询
var areaList = $('.area');
console.log(areaList);
// 根据元素标签来查询
var pList = $('p');
console.log(pList)
</script>
</head>
<body>
<input type="text" name="username" id="username">
<p class="area city">广州</p>
<p>深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
</body>
</html>
在文档加载完之后执行jquery代码
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器的练习</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// jQuery代码的内容
// 在DOM文档加载完之后执行jQuery代码
$(function){
// 根据ID
var username = $('#username');
console.log(username);
//根据class来查询
var areaList = $('.area');
console.log(areaList);
// 根据元素标签来查询
var pList = $('p');
console.log(pList)
}
// $(document).ready(function(){
// // 根据ID
// var username = $('#username');
// console.log(username);
// //根据class来查询
// var areaList = $('.area');
// console.log(areaList);
// // 根据元素标签来查询
// var pList = $('p');
// console.log(pList)
// })
</script>
</head>
<body>
<input type="text" name="username" id="username">
<p class="area city">广州</p>
<p>深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
</body>
</html>
伪类选择器(:first)
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器的练习</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// jQuery代码的内容
// 在DOM文档加载完成之后执行jQuery代码
$(function(){
// 根据ID
var username = $('#username');
console.log(username);
//根据class来查询
var areaList = $('.area');
console.log(areaList);
// 根据元素标签来查询
var pList = $('p');
console.log(pList);
// 伪类选择器
var pFirst = $('p:first');
console.log(pFirst)
})
</script>
</head>
<body>
<input type="text" name="username" id="username">
<p class="area city">广州</p>
<p>深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
</body>
</html>
根据属性查询
// 根据属性查询
var password = $('input[name="password"]');
console.log(password)
查询DOM信息
getVal.html
<!DOCTYPE html>
<html>
<head>
<title>查询DOM信息</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="username" id="username" class="input-text user-input" my-user='zhangsan' value="我的用户名">
<input type="text" name="password">
<p class="area city">广州</p>
<p style="color: #f00">深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
<p class="info" id="info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(document).ready(function(){
// class属性
var cls = $('#username').attr('class');
console.log('class:', cls);
// type属性
var tys = $('#username').attr('type');
console.log('type:', tys);
// 自定义属性
var user = $('#username').attr('my-user');
console.log('my-user:', user);
//查询html信息
var htmlContent = $('#info').html();
console.log('Html:', htmlContent);
// 查询text信息
var textContent = $('#info').text();
console.log('Text:', textContent);
var inputUsername = $('#username').val();
console.log('inputUsername:', inputUsername);
//jQuery对象转换成DOM对象
var username = $('#username');
console.log('username jquery', username);
//dom对象
console.log('username dom', username.get()[0].value);
})
</script>
</body>
</html>
$(’#id’).get(0)的使用
<!DOCTYPE html>
<html>
<head>
<title>DOM查询</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="username" id="username" class="input-text user-input" my-user='zhangsan' value="我的用户名">
<input type="text" name="password">
<p class="area city">广州</p>
<p style="color: #f00">深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
<p class="info" id="info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(function(){
var pList = $('p');
// 第一个p元素
var p1 = pList.get(0);
console.log(p1);
var p3 = pList.get(2);
console.log(p3);
})
</script>
</body>
</html>
jQuery遍历
dom.html
<!DOCTYPE html>
<html>
<head>
<title>DOM查询</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="username" id="username" class="input-text user-input" my-user='zhangsan' value="我的用户名">
<input type="text" name="password">
<p class="area city">广州</p>
<p style="color: #f00">深圳</p>
<p class="area">长沙</p>
<p class="area" id="beij">北京</p>
<p class="info" id="info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(function(){
var pList = $('p');
// // 第一个p元素
// var p1 = pList.get(0);
// console.log(p1);
// var p3 = pList.get(2);
// console.log(p3);
console.log(pList);
console.log('总共有几个:', pList.length);
// 循环遍历
for (var i=0; i<pList.length; i++){
var item = pList[i];
console.log(item)
}
})
</script>
</body>
</html>
.each函数循环遍历/.find查找
<!DOCTYPE html>
<html>
<head>
<title>DOM查询</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="username" id="username" class="input-text user-input" my-user='zhangsan' value="我的用户名">
<input type="text" name="password">
<p class="area city">广州</p>
<p style="color: #f00">深圳</p>
<p class="area">长沙<span>测试数据</span></p>
<p class="area" id="beij">北京</p>
<p class="info" id="info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(function(){
var pList = $('p');
// // 第一个p元素
// var p1 = pList.get(0);
// console.log(p1);
// var p3 = pList.get(2);
// console.log(p3);
console.log(pList);
console.log('总共有几个:', pList.length);
// 循环遍历
for (var i=0; i<pList.length; i++){
var item = pList[i];
console.log(item)
}
// .each函数循环遍历
pList.each(function(index, value){
console.log(index, value)
});
console.log('-------------------')
$.each(['a','bbb','ccc'], function(index, value){
console.log(index, value)
})
//.find的使用
var list = pList.find('span')
console.log(list)
})
</script>
</body>
</html>
jQuery修改DOM对象
<!DOCTYPE html>
<html>
<head>
<title>DOM查询</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="username" id="username" class="input-text user-input" my-user='zhangsan' value="我的用户名">
<input type="text" name="password">
<p class="area city">广州</p>
<p style="color: #f00">深圳</p>
<p class="area">长沙<span>测试数据</span></p>
<p class="area" id="beij">北京</p>
<p class="info" id="info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(function(){
var pList = $('p');
// // 第一个p元素
// var p1 = pList.get(0);
// console.log(p1);
// var p3 = pList.get(2);
// console.log(p3);
console.log(pList);
console.log('总共有几个:', pList.length);
// 循环遍历
for (var i=0; i<pList.length; i++){
var item = pList[i];
console.log(item)
}
// .each函数循环遍历
pList.each(function(index, value){
console.log(index, value)
});
console.log('-------------------')
$.each(['a','bbb','ccc'], function(index, value){
console.log(index, value)
})
//.find的使用
var list = pList.find('span')
console.log(list)
//构建dom对象
var html = $('<p class="test"/>');
console.log(html)
//添加到html dom
html.appendTo('body')
// $('body').append(html)
})
</script>
</body>
</html>
.html()/.text()/.val()/.attr()设置内容
<!DOCTYPE html>
<html>
<head>
<title>DOM查询</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="username" id="username" class="input-text user-input" my-user='zhangsan' value="我的用户名">
<input type="text" name="password">
<p class="area city">广州</p>
<p style="color: #f00">深圳</p>
<p class="area">长沙<span>测试数据</span></p>
<p class="area" id="beij">北京</p>
<p class="info" id="info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(function(){
var pList = $('p');
// // 第一个p元素
// var p1 = pList.get(0);
// console.log(p1);
// var p3 = pList.get(2);
// console.log(p3);
console.log(pList);
console.log('总共有几个:', pList.length);
// 循环遍历
for (var i=0; i<pList.length; i++){
var item = pList[i];
console.log(item)
}
// .each函数循环遍历
pList.each(function(index, value){
console.log(index, value)
});
console.log('-------------------')
$.each(['a','bbb','ccc'], function(index, value){
console.log(index, value)
})
//.find的使用
var list = pList.find('span')
console.log(list)
//构建dom对象
var htmlDom = $('<p class="test"/>');
console.log(htmlDom)
//添加到html dom
// html.appendTo('body')
// $('body').append(html)
// 在dom中添加内容
htmlDom.html('<span>我是新加的</sapn>');
$('body').append(htmlDom);
})
</script>
</body>
</html>
$('#beij').html('<span>我是新加的</sapn>');
css()添加css/.addClass()、.removeClass()类操作
$('#beij').attr('class','666');
// 添加新的class
$('#beij').addClass('666')
// 移除class
$('#beij').removeClass('area');
//操作css样式
$('#beij').css({
'color':'#f00',
'background-color':'#000'
})
.show()/hide()控制显示和隐藏
// 隐藏元素
$('#info').hide()
<p class="info" id="info" style="display: none;">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(function(){
//显示元素
$('#info').show()
})
</script>
//jquery的链式调用
var myDom = $('<p/>').text('你好').append('<span>,财主</span>').appendTo('body');
// console.log(myDom)
jQuery事件
event.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<!--阻止a标签的跳转-->
<li><a href="javascript:;">email me</a></li>
<li><a href="javascript:void(0)">email me</a></li>
</ul>
<!--字符串
var str = '';
$('a',$(str)).on('click', function(){})
-->
<script>
$(document).ready(function(){
$('a').click(function(event){
//阻止a标签的默认行为
event.preventDefault();
alert('clicked')
})
})
</script>
</body>
</html>
js业务逻辑和html分离
event.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<!--阻止a标签的跳转-->
<li><a href="javascript:;">email me</a></li>
<li><a href="javascript:void(0)">email me</a></li>
</ul>
<script src="./js/myjs.js"></script>
</body>
</html>
myjs.js
// js业务逻辑和html分离
$(document).ready(function(){
$('a').click(function(event){
//阻止a标签的默认行为
event.preventDefault();
alert('clicked')
})
//单击事件
$('a').on('click',function(){
alert('on clicked')
})
})
绑定双击事件
$(document).ready(function(){
$('a').dblclick(function(){
alert('db click')
})
})
鼠标移动事件
event.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<!--阻止a标签的跳转-->
<li><a href="javascript:;">email me</a></li>
<li><a href="javascript:void(0)">email me</a></li>
</ul>
<input type="text" name="" id="username">
<script src="./js/myjs.js"></script>
</body>
</html>
myjs.js
// js业务逻辑和html分离
$(document).ready(function(){
// $('a').click(function(event){
// //阻止a标签的默认行为
// event.preventDefault();
// alert('clicked')
// })
$('a').on('click',function(){
alert('on clicked')
})
$('a').dblclick(function(){
alert('db click')
})
//鼠标移动事件
$('#username').hover(function(){
$(this).css({
'background-color':'#f00'
})
})
$('#username').mouseenter(function(){
$(this).css({
'background-color':'#f00'
})
})
$('#username').mouseleave(function(){
$(this).css({
'background-color':'#fff'
})
})
})
键盘事件
event.html
<!DOCTYPE html>`在这里插入代码片`
<html>
<head>
<title></title>
<script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
<style type="text/css">
.text-error {
color:#f00;
}
</style>
</head>
<body>
<ul>
<!--阻止a标签的跳转-->
<li><a href="javascript:;">email me</a></li>
<li><a href="javascript:void(0)">email me</a></li>
</ul>
<input type="text" name="" id="username">
<p id="txtErr" class="text-error"></p>
<div>
<h6>您输入的内容：</h6>
<p id="usershow"></p>
</div>
<script src="./js/myjs.js"></script>
</body>
</html>
myjs.js
// js业务逻辑和html分离
$(document).ready(function(){
// $('a').click(function(event){
// //阻止a标签的默认行为
// event.preventDefault();
// alert('clicked')
// })
$('a').on('click',function(){
alert('on clicked')
})
$('a').dblclick(function(){
alert('db click')
})
//鼠标移动事件
$('#username').hover(function(){
$(this).css({
'background-color':'#f00'
})
})
$('#username').mouseenter(function(){
$(this).css({
'background-color':'#f00'
})
})
$('#username').mouseleave(function(){
$(this).css({
'background-color':'#fff'
})
})
// 刚进入页面，让input输入框获得焦点
$('#username').focus();
// 在用户名输入框输入内容之后，在后面给它实时的展示出来
var showp = $('#usershow')
$('#username').keyup(function(){
var val = $(this).val();
showp.text(val)
})
//验证用户输入的是否为手机号码
$('#username').blur(function(){
var phone = $(this).val()
if (phone.length !== 11)
$('#txtErr').text('输入的手机号码有误')
})
})
表单验证
event.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
<style type="text/css">
.text-error {
color:#f00;
}
</style>
</head>
<body>
<ul>
<!--阻止a标签的跳转-->
<li><a href="javascript:;">email me</a></li>
<li><a href="javascript:void(0)">email me</a></li>
</ul>
<input type="text" name="" id="username">
<p id="txtErr" class="text-error"></p>
<div>
<h6>您输入的内容：</h6>
<p id="usershow"></p>
</div>
<form action="event_submit" method="get" accept-charset="utf-8">
<input type="text" name="uname">
<input type="password" name="jpassword">
<button type="submit">提交</button>
</form>
<script src="./js/myjs.js"></script>
</body>
</html>
myjs.js
//阻止默认的表单提交事件
$('form').submit(function(){
//验证表单
// 直到验证通过，再提交 //ajax
return false
})
Ajax原理
templates\ajaxjs.html
<!DOCTYPE html>
<html>
<head>
<title>ajax js的实现</title>
</head>
<body>
<p>ajax js的实现</p>
<script>
// 1.创建XMLHttpRequest对象
var xmlhttp = null;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
}else{
alert('浏览器不支持')
}
// 2.注册回调函数
if (xmlhttp !== null){
xmlhttp.onreadystatechange = callback;
}
// 3.配置请求参数
var url = 'http://127.0.0.1:8000/ajax/js'
// 4.发送请求
xmlhttp.open('POST', url, true);
// 发送请求
xmlhttp.send(null);
// 5. 回调处理
function callback() {
if (xmlhttp.readyState === 4) {
// http状态码
console.log(xmlhttp.status)
}
}
</script>
</body>
</html>
test_django\urls.py
urlpatterns = [
path('admin/', admin.site.urls),
# ajax的实现
url(r'^ajax/js$', views.ajax_js),
]
test_django\views.py
def ajax_js(request):
"""ajax处理"""
if request.method == 'POST':
print(request.POST.dict())
return HttpResponse('OK', status=200)
return render_to_response('ajaxjs.html')
在jQuery中使用ajax
新建static\js文件夹，将jquery-3.5.1.minj.js文件放入文件夹内
配置静态文件路径
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
实现对jquery-3.5.1.min.js的访问
新建tempaltes\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
</body>
</html>
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
# ajax的实现
url(r'^ajax/js$', views.ajax_js),
url(r'^ajax/jq$', views.ajax_jq)
]
views.py
def ajax_jq(request):
""" jquery + ajax """
return render_to_response('ajax_jq.html')
修改tempaltes\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<script>
$(document).ready(function () {
$.ajax({
url:'http://127.0.0.1:8000/ajax/js',
method:'POST',
data:{
'username':'admin',
'password':'123321',
}
})
})
</script>
</body>
</html>
修改views.ajax_js
def ajax_js(request):
"""ajax处理"""
if request.method == 'POST':
print(request.POST.dict())
return HttpResponse('OK')
return render_to_response('ajaxjs.html')
修改tempaltes\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<script>
$(document).ready(function () {
$.ajax({
url:'http://127.0.0.1:8000/ajax/js',
method:'POST',
data:{
'username':'admin',
'password':'123321',
},
success:function (data, status) {
console.log('data',data,status)
},
error:function (data, status) {
console.log('error',data,status)
},
complete:function (data, status) {
console.log('complete',data,status)
},
})
})
</script>
</body>
</html>
views.ajax_js
def ajax_js(request):
"""ajax处理"""
if request.method == 'POST':
print(request.POST.dict())
return HttpResponse('OK', status=401)
return render_to_response('ajaxjs.html')
views.ajax_js
def ajax_js(request):
"""ajax处理"""
if request.method == 'POST':
print(request.POST.dict())
return HttpResponse('OK', status=200)
return render_to_response('ajaxjs.html')
AJAX快捷函数
.post()
templates\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<a href="javascript:;">点击提交</a>
<script>
$('a').click(function () {
$.post('http://127.0.0.1:8000/ajax/js'),{
},function (rest) {
console.log(rest)
}
})
</script>
</body>
</html>
.getJSON()
test_django\urls.py
urlpatterns = [
path('admin/', admin.site.urls),
# ajax的实现
url(r'^ajax/js/$', views.ajax_js),
url(r'^ajax/jq/$', views.ajax_jq),
url(r'^ajax/json/$', views.ajax_json)
]
test_django\views.py
def ajax_json(request):
import json
user = {
'username':'张三',
'nickname':'昵称',
'profile':{
'age':23
}
}
return HttpResponse(json.dumps(user))
templates\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<a href="javascript:;">点击提交</a>
<script>
$('a').click(function () {
$.get('http://127.0.0.1:8000/ajax/json',{
},function (rest) {
console.log(rest)
})
})
</script>
</body>
</html>
templates\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<a href="javascript:;">点击提交</a>
<script>
$('a').click(function () {
$.getJSON('http://127.0.0.1:8000/ajax/json',{
},function (rest) {
console.log(rest.username)
})
})
</script>
</body>
</html>
通过get方式获取的数据需要转换
templates\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<a href="javascript:;">点击提交</a>
<script>
$('a').click(function () {
$.get('http://127.0.0.1:8000/ajax/json',{
{#$.getJSON('http://127.0.0.1:8000/ajax/json',{#}
},function (rest) {
// 通过get方式获取的数据需要转换
var username = JSON.parse(rest).username
console.log(username)
})
})
</script>
</body>
</html>
AJAX全局设置
tempaltes\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<a href="javascript:;">点击提交</a>
<script>
$.ajaxSetup({
headers:{
'appfrom':'web'
}
})
$('a').click(function () {
$.get('http://127.0.0.1:8000/ajax/json',{
{#$.getJSON('http://127.0.0.1:8000/ajax/json',{#}
},function (rest) {
// 通过get方式获取的数据需要转换
var username = JSON.parse(rest).username
console.log(username)
})
})
</script>
</body>
</html>
请求响应拦截
tempaltes\ajax_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<a href="javascript:;">点击提交</a>
<script>
$.ajaxSetup({
headers:{
'appfrom':'web'
},
statusCode:{
401:function () {
alert('您没有登录')
}
}
})
$('a').click(function () {
$.get('http://127.0.0.1:8000/ajax/json',{
{#$.getJSON('http://127.0.0.1:8000/ajax/json',{#}
},function (rest) {
// 通过get方式获取的数据需要转换
var username = JSON.parse(rest).username
console.log(username)
})
})
</script>
</body>
</html>
test_django\views.py
def ajax_json(request):
import json
user = {
'username':'张三',
'nickname':'昵称',
'profile':{
'age':23
}
}
return HttpResponse(json.dumps(user), status=401)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
