[Django] html 前端页面jQuery、图片等路径加载问题

时间:2023-12-27 18:49:55

严格的说这个话题应该属于一个html前端路径加载问题。为了实现一个局部更新页面的功能,简单了解了一下Ajax。Ajax是一个为了实现浏览器和服务器异步通信功能的模块。严格来说不是一个新的语言,只是JS的一个延伸。而jQuery是一个JS的类库,里面也包含了Ajax的一些功能,比直接写Ajax更简单些。

看了些资料后,在网上copy了一个简单的例子做测试:

<script src="../static/jQuery/jquery.min.js">
</script> <script>
$(document).ready(
function(){
$("#btn1").click(function(){
$('#test').load("/demo_test.txt");
})
}
)
</script> <h3 id="test">jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">get some extra content</button> 

这个例子实现了一个简单的功能,点击按钮之后内弄会被demo_test.txt 里面的内容替换掉。

代码分析:1.导入jquery.min.js库,jQuer源地址://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js 。

     2.通过btn1,test定位到具体的对象。

3. 点击button会触发click这个方法,从而去加载demo_test.txt文件替换原有内容

然后在本地静态页面测试,是ok的。可是在Django页面加载时候始终不能成功。找了半天原因才发现是路径加载原因,Django运行之后,无法通过相对路径加载jQuery,img,这些静态文件。这个error可以通过点击源码上的路径调试,如果文件是成功加载的,会直接打开文件,否则会出现如下类似错误

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmsAAABnCAIAAADQc5LhAAAYUklEQVR4nO2dv3KjStPGuQtdwgkJuAhHvgQS3cKW801JSJycyKFiEgJnW/WmCrbK1FdF1QmUWamzzfoLWmqa+SdmBBLyPr9yIMMwNDPDPPT0wGQEAAAAgHiyexsAAAAAPCRQUAAAACAFKCgAAACQAhQUAAAASAEKCgAAAKQABQUAAABSgILOybFrN9mm7Y51WRRlffd8AAAALMc8Cvoz+7n/dz9LVg9NXRabfNt17SbL6qa/ez4AAACWI9vv9/v9/qM/RB7YP+XbI9H7j/ef2c95FVTy/Jn9fP/xPuWQqqqyM1VVzWVJFMeuzfPtkagui2tkz5PPcZs/QUsBAGA9sA/6p//43R8+Jx/VF1khvfnuebeED8o6OlFBGdbReynoW1UdiY5d+3ad1+jPZ1TsAAAA7stpFPfz0E9WULMfv6igu+fd6z+vsZY9nILeBIgoAACsBfFB/+9rUnpHDx5W0MOvw8/s57dR0LbaZhbbql3ujBYQUQAAWAXZx36/3//+/PozIbG772YF1X+HX6eoqrFdhPb1n1d718/sp852LgXtuk6rXVmWOrFB13VyYJ7nxt5kbW4ryrLTX6+21A1t89P2truQiQIiCgAA92eIgx4+w16ot9cWBT38OrDs7Z53stfpg8pGkUnWVJFemk9BWfz4d1mWWib5X97Lx4q+8i7OiqVUi2sUbUVbZdFTTkciIqrLQTjbiooyKleIKAAA3JmTtPz5+vz46C/5oaf5twZ6FHf/7366gr7/eGeZPPw6LKegZLmhhoLyv03ThBW0aZrplmjEyzTc0Lqk+pxl30QpKOblAgDA/ZH3Qb8+9h8XQ6HyooVm5QrK+pfnOXl8UKeC0ngUV/JMiIMWZ8k0SFXQ4zbP285+kgEAAHBTonxQIpeIrllB2fs0PMvpPmjyyK1mm7tjnEkKCvkEAIC1cFLQQ/8x/X1QQ0SnKCjPEto973jXzRSUdVHioMZ8orAPGphkFEVb0eYc+yQisS5eQSGfAACwIk7fJIr5nAKRElH9/SCWT/tbQnqybnguLruqOs+JXyayJ9aKjsp0IR7L5R9N0+hDRGjlQK27dB7RjSoiDU8a0nNuZXZu3VDfnH5vQ1N9IZ8AALAu8GV5BzLzSLYY/wIAAABQBTfG9N25YqIAAAC+DVBQAAAAIAUoKAAAAJACFBQAAABIAQoKAAAApAAFBQAAAFKAggIAAAApzKOg4RW2r+T1n1f9kSMAAABgDWQU81FcxWmdFvl+0BIKKpmfFRRrkgAAAFgLGS8O+jtOQUeLU+rv4s6O9aFdrIsJAABgFWSfh/8Oh/9iFNTUsNsqqMMAAAAA4PZk/x0+vz4PkxXUoV43V1C3GQAAAMAtyf4QTVZQt27ppVf4z16kTP5ku6x6No50uvN0zSSCiAIAALgnGU1VUK9iidodfh1YL0XwjDU+9VLbWlA5B9Fd/pcz0b+nmwQAAAAszXQFJZl/axBYYdu5DqgcaLihoqA6mWcUlzAvFwAAwH05rbA9cZ1tWVhbE1BQQzI1LK7skho+6AQFxXLTAAAA7kyUD0rkEtGLPqgOizLsfUqySAWFfAIAALg/0QpKlogGFJTjoBL7lK8LcTKRSWPGEGfI0VPWYKWgkE8AAACrIOs/fsso7uHza+JhIqJ6qq3oop49ZMyqNaYL8Z+ES+WVGNkiP95/vEM+AQAArAd8WR4AAABIAQoKAAAApAAFBQAAAFKAggIAAAApQEEBAACAFKCgAAAAQApQUAAAACAFKCgIcezaTbZpu2NdFkVZ39uchwHlRigEsAyrald/r4JmWdY0zb2tWDt1WWzybde1myyrG3zJfyooN1pHIfQNtd3p96Pc7o9i571YQ7sShi/Lf/Tm12tnxb2uy12oqirLsm+soHyBeZ5fmY98eaoui7u31AcC5UarKYSqIiJqK8oyque43TmrLKNtNUNuzsxnsXOdHDvaZKcClCcbH8U55SYn0Q5Pu7rbUl238UFXt5BnWZZQ0Iu8VdWR6Ni1b3+rDKSBcqN1FELfDGpUl3MqU1stoqA0t51rozgLZ11eKMBtPiSoSyrK029/u7qPytxAQee8sN3zTr5Tfw0XFbQsS58CBXaBBN4qmmVwIjafuc67WmZvqDNmeJtKfymHvWFlirXnuyroovVy7CjPp+ZfZDQ4mB1t1L9+7iCiSyvonJfEa6LdQEG7rvP5cIFdD0pbbTOLbdXe5uxRN9WM+cx13tUye0N1ZpjWeG5T6doBpaAyJdjzLRXULgcZstZ/Fy/cV55R5bzNh2HeY0dPZTD1wK1F9BQHjVrdbDKOi5G1Vow/SaAXe9Hb7UNkIRdWVmOJtDCsoJquO1WX3SOI0Pp2SWDVmWEY41i9K89z3sjWVlVF4yBu0zT8m3cRkWzRG42zdF0nOes0UehbS1dxXZqhCwntbHMz/lGM70zdcdj5p+XjxJm+b4Z/JVqzrYbzFq74ja8cYgk0A91WRcDCTS7Qhn3nuibDKBIqnZPJ7/5SPox2QOmsTBMbzzanTU5POWUZvVSnxqDr16eg23wYb7yIs/H47NQRROPmYrOlAcshcjMasuc8b9RNpOO1fF7J35mPNn66DG+yU2Fu86ib66Yierp/Dv3H3DOJ3JchfiQr5fuPd70Kt2zkxIbH6fNBtdYai3X7kF6p6zruO8pyaPgJPihnyNtZxvi3s2PKxnIoMqZz1qrJgifJtANt5MAENvJRfBXXyKe+h53hirYafvOdzDe23k6ex1Kje3o6J4jKJ/z47Dxv3wx5GiE06Wv6xn3t2s5YdNzaqDuua26cRkOVNmzvIn9DvdjkYjNMIKrSdWJDFAM+jeGAUmTj4e677Yamrl0i29oEAjeR087CUll9aWU5iI0Im6Q5dvRyzj/QaKN8RG2Dked0HzR8k25zKsu0SVu3E9GTgv75+vy9/5i6OuhUHPNvWQXff7yzWB5+HbSCOj1U41jnKK7hhk5UUJYTFrxZFFSe2VnzLrqh4gsaPgGfxfAPrlRQUt0lJwjbFqBwzaOzbw/pdPTNplXKeRQfaNxUfDPE5hPAl176KR3IMTosuS6fnbEYDp9gNzbdrnSTm96GfU0uOcMEoiqdznVdl2arC1S6obUU2Xhki2jD7ArqvIku2rlx+Yj6yVUwjhUC5Xx7BQ2gC1zPKprATeflSjf69TG/gg4zj4WwghqSaeBTUM6Bt0f5oHdXUN1/Bc4yl4KKkXmey/UmhLIKl1Ro54yRx+FY5XPmn5BPAF/6tjqdQheeT0F9dsbiawZ6MIPhdsVVnyZ4vnOlZThjHDRcmE7F8lWi7YDSKhU0qpHzwPLRSmP/K8i4rjY1UM5RPuKiCmoHPiffa8dtnrfd7WY4DD7oxyKhUFNEp/igPv1zKihvlNjnYymoL9lCCiqu7RTbAjhb87w+aMLj+SwKyrduW40MCPigF99pm8LEBymazwd11v7dfVBfYfYNbSuHTvgq0XZA6cEV1FCUiQqqrdVK7Cvn9figtgM9TUFvLZ+k46D94XOhc2gRDSsobxSNfP3nVU8LkqFaIto973jX/t+99lwnzieaoqDcqZVlOWWXHa+a0tcYKbVrqL0NZxyU/2VjJiqoZHVlP2iMGkmHpd/xMuKg4YEpvjcadUNqd1auIzafAIH09pBRXY5CVs7fNHZbo9CNh4jyPHeGw51x0LDg2Q010OTSMkwgqtKJqPT0/s58nA4oRTaeGyho4Cay7WRvUs/6qRv3faHz15LzNKHRRt1E+mYvMlNBnfnEvs2iFXrC/Kw7yCfJXNyFP0g0iKhvLq6oJjuRvoim3itzcfVGyV/22ujZPb7Jq3oCpDHt0LnLntw7sWSMA7VzYGQo5mlX0phVqy8nVlyj0NP8DHeNN+opRfZ0QX2/ySHGY7WRf1o+Uy7BSO+chCITMo1gp68cYgk0A73LEMK0Nuw815U3RSyxld6PG0AgH6cDGtt4OFj4VJ4qneezbM6aGphTGjUXN6qR68TVeSqsYYxvYrPvJrUb7fSbSAdl2Z7wzajjr5tpOur8JpHPnLvIJ/3N38Wdl0U/szCX7IEptJU5XvS9PxPznfA5oLc0YKH3RME6gYLOgH5+n13nFs0caPgx2egBF/0OKvhmGGOn4NsDBQUAAABSgIICAAAAKUBBAQAAgBSgoAAAAEAKUFAAAAAgBSgoAAAAkAIUFCzBsare7nLivnm7y4vVscBOoEE5PyjZ7/1phdDPryU+iys41mnxYXzbb2J6/pOV0S7h/n6/9aXszTdr1seu3Sx8aVyGRVkvkfklbq3cbbXdTG7YCqedfZFldTO0yrosuKruVJg00c4HIrW+nCSUg68bjGi3d+wegU3G67EssD6oJm61ttgmoo+a3ES8VtVlIXfFsWs3t13xfGH64iycdVlcXEMj/TRNfZdOv2/qG/fsaT2yx85Rj9xWWynDuizWVJ5QUCa2HLzdYFS7vW/3CAxuMIrrrond8y62EYSPim8ibtu0gtr/ro23qopZkMRcbG4hrlfQqOs6c3wpXyYeFZt/kj0+ptg5POu4/r0NEeUJLhEQJEc5r7Z7BAZLK6i7DgJrZQcIH5XURBwWPpCCxirioyhomp3TH+TvW25T7OybeuwqHbf55sbt8PYO/fclJEV2Oa+5ewQGEgedf3ltX+nbC7PIOiqyVJld2YGjGF8T0WEAz/LdIzu1ZPZNnZ13qQhiZvduOnYqo6MqqnqhFXLKuvnfOauRwyHxMHXevhgHbMOdnTbeMNKZ/9me/lwIp/QT7SzL8qKCesoz7rp0fvaDvNijrtebf6w9XCyZa0HpYL27Hbuzqafy1EO4kmBbtb568Z1XttRNfzZ403ZHMb5uernw8YVMspNTSmN4a95eRu3kBnaOynabbzb501O+ybLspao26hTO+gq35wCucnC2N7okQmY5r7x7BAYZTx/6PPS/Z15hO1TuaY9LCUcZG/2HD9bq20D1gF6VVQHF0Qo7bbXVd9HFiVR1WTg7UB0DMzrWWXwpX/76GvW1TLFzQtzOW54J10WuB3m95di1L6rfdOWfaM+4lk9b9IOIsTfo2A3tx6eg5K+XQHury+L8TDP4snqcIFx6ATvJbP8b3U5uYKdpWddusk3bHc+1YC56ZdeIrz1PYJS5p71dkB/nFa25ewQGMor7p//4mHs6rlc2btZEnMuRWoeOJp4Fhm21m+JRUBlqMx3Ti26o4fvynWz13aOb9noFDeQfUFDbTuMemziK6yzPhOtyOkwBG3z5J9hj9cjhgGU4sniNgobam+eBZqgyK8o71U5jqp2vnSxmp2XZuabOZ5ykoK72PAVTQT3HBp6e3eW85u4RGCyqoN6u52ZNxD80Mdho3GMeBeUBou3RkWboFCYP3Thw3snheNj1ChrIf2EFDZRn9HX5XBPfQKsr/0R7XAoaEfEaMzRFrpe34b2gi/USOq/vobCttnXTE/VVhKNMhoLqkpmgoHPa6bDsfgpKce3tlN55vWvuHoGBKOjXxyKhUHfrufFD1uGX70UdR/tw3sbHrn1St9Z4FPfJ1cKiW95f5YMGyjP+ui5PGb04+p1sT4yCXrTT8O1EO/O35m2jogwe387b3nzKxFfdVi/jA+PsjFTQGe10WXZXBdVnMfJxPrT5ynnN3SMwOL0P+vV5WO59ULv1cGXz48/uebd73un04SYSdZTx7tTrP6/qKHf7cN7GekrR+T2w/51fgtaTTYYRvPGbZ5ffmPbdyfrFTVsJpGNtmiacP/njoM781fa+UI/VE+w8bvNNuCcKlmfcdfke5OuyVFtHI2l2/sn2OHtkde1DLzlhaqsZX+R89Kwc8tdLoL35AxPHbZ5vxy0z0k4zcqHbyZJ2jsYMhq2zKag7f385hNqbYZucy1fOa+4egUF2+iLRzNOITOy+e/e8C082c045cx5lTCczjtKHqAcud/vQcwKNXWqGUVENnZrhc5ghVVtZnbjmIo5E63RiS5Zk14Reb4g/GV2DM38VFDxdr8wF9dg5zMmsqhd7LGtaeUZfl+9Bfvx5KbP87fxj7ZHLtwfuXPU+5d1KR0BB1dexU+6pUS++8xrf2HI+Go43JtgpT5CbsnwSY5a206Vwpxb4VJabsz3n0nPXl789RytouL1JmZy7wQvlvM7uEdjgu7hXYX20CJPWbsqjvLMYsFN8Nf8HsFgYFmlXbVXpbK+z0+HhzYVh5x2ZUg4XeZR2Cy4CBb2W8auW3+07umBplG90y2evk7s2XfAu2ilO2KwiGm3n0typvsBKgYICAAAAKUBBAQAAgBSgoAAAAEAKUFAAAAAgBSgoAAAAkAIU9J7Ih7DvtYTyRB7FzkVBIdwGlDN4IKCg96Qui02+7bp2E7fYvcmE7xFdxVx2PjQohNuAcgYPxOmbRIstESpcXt7rb0M+UHLNIt5tRVlG9ZIKOoudj46zELY5ZRm1Hel/NzmdlzajLKMso6KkcPq3c0r5k0ycxJ5XH7ithn9b67ySJxH1zWhXfz4R/yaiQp3FyIrPYqSvy9Mu+7xivKexYXkQsFJOPuifr8//Dp+LnQVf6nHASzUdu/btOlmqy2UVdC47HxpfIWzzkVC9VYOMiSrU5aBbvvRGJdblSMxsYs/LvJT0NJbVthrSsGT21m8iKs7ius0Hw44d5WOl17mJnfpCyvPZfdfrb2zoQ8AaOSnooe8Xc0DnbPq7551v8YG/ljQFlT73USjLMs/ztWVYVbTNh/KXUi3G/lxxViNfel2JL+Xlqok9LxH1DbXdaAtZmlco/1I3qmNHbw1RvIJqFZdMEq6XrwAiCtZGRss6oHM2+vDyPevE+GT2Ap89S1FQu+9bOV3XZVk2o4I6M0yorKqivhncPlYyvYURtXOmp3ElPk2omtjzElFbUW95t4YPyocbDqgmVkH7ZvCV2QBKul7JDyIKVkVGCzqgjubuXBVdr/JqrCQg2+1DZPEBWdaH/4xlfWyqqrI7yq47dQzctwrleeApz3P7qCzLfNmmFZmEiOpmCERJn8WRJCNOxp2RxJx0/+hMX4xDUMZgmhHKSiNQFGVZynYRsHCN2Lv0EmPOc12TYeSVEimh8imZuGLO9DQu+XAQNO28dHb1DJHTIUkdSbVjqEysgpLya/WwR+z1KiCiYEVkRF/9IiuDuhu6+JGyXp1e5dVYxM7wOH0+qNZaXqzHv2bsCenH6dzbilLqjpiTcc8rXgunr6qKNZX3ykbJ5BqHqS6pLE+9mPSSdTl6nC9USEmEU/ehvvTk8UH7ZlDTY0cvqQrKRcGXbxQLlycXtVHsgRohvw8aKPa0DOMvlkgVO4uEDkYyhoIa6SnJB406rxxy7EahUNE8PbobVtDAjCengoroVmpXqg/KQETBWsg+D/3hc6EYqGP+Lavg+493FsvDr4NWUKeHahzrHMU13NCJCsri1zSNs3s1fBfeWFUVd8dd12kFdXqoqeU2Ej/G1jzpmIxRXO4KA+mdudF4wO0aDIdPsEVLF+CUGrEFL1DsaRnGUqkpQnUz1Qc10lNSHDTqvPbEWkY0T2vtvD4ob9TPZwnXq8C8XLAisv7j4/NrqdW17YW1wwpqSKaBT0E5B94e5YM6u1fulLlvtX1Qn4L6JDMtDmqHNgMhLiMx93HhkJgvDir97DVDuL6i4HK2FZRHUNMEL/CkkpBhWhyU4QKvKjp6Hl8kDmqnp/hgdux5dQxSq6Bonj7WbjzkOnaigvKTmTYg4XrPYOVnsC6yj/3v5RSULBGd4oP69M+poLxRYp9XKih3rMbQ4nQf1Ha80rD7lxv4oJqAF3IRn6ot54M6i/3GPigR1eUgPPacWOdIph5yN2o8HJmNPa/287TO6d8it8eONuN8kufiihn2HN2o6+UTQj7B2sh+L6ygNBbRsILyRtHI139e9bQgGaolot3zjnft/91rz3XifCJf98q/RQDEESnLMqygOvhHRHme6/46FucTum+cLRAf9Y3LcRfJPoH0XHU58hLio1MndLCTiPI8N2KTHLZ0xkEvjqtzStkVKPa0DGPRSuZz4+xgpJ3eOZDAP5zu4DXnNebH6rm4uvHo80pjSFNQ40sOgev1A/kEa+QWCkpKRH1zcUU12Yn0RTT1XpmLqzdK/rLXRk/UFMmUnt2YLCrJfHNx7akrTJo/anyuxdBRmcFovE0vH7Wxw2C+z9PILv22g+/zNLEEikLvMoTQVyP2gXrqrPNc12Q4HeNjQDSebur7JpGd3v5Gj+/LBtecVypaviWkJ37LLi2uhjGx3yQS2sp8hcZ3vR4gn2Cl4Lu4AKyaK8YyAADLAgUFYKXowXYAwAqBggIAAAAp/D9XVFdrWio1hAAAAABJRU5ErkJggg==" alt="" />

一时想不到Django的解决方法,因为现在已经比较清楚Apache的静态文件的加载。直接部署到Apache上,用apache设置路径。成功加载!