Ajax与jQuery

技术2023-07-14 115

使用原生的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查询

在文档加载完之后执行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)的使用

jQuery遍历

dom.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对象

.html()/.text()/.val()/.attr()设置内容

$('#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>  <li><a href="javascript:;">email me</a></li> <li><a href="javascript:void(0)">email me</a></li> </ul>  <script> $(document).ready(function(){ $('a').click(function(event){ //阻止a标签的默认行为 event.preventDefault(); alert('clicked') }) }) </script> </body> </html>

js业务逻辑和html分离

event.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>  <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

键盘事件 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>  <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>  <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

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)

Processed: 0.010, SQL: 10