首页 / JQUERY / 使用jquery与ajax进行数据交互

使用jquery与ajax进行数据交互

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用jquery与ajax进行数据交互，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2902字，纯文字阅读大概需要5分钟。

内容图文

这次给大家带来使用jquery与ajax进行数据交互，使用jquery与ajax进行数据交互的注意事项有哪些，下面就是实战案例，一起来看一下。

jquery框架中提供了$.ajax、$.get、$.post方法，用于进行异步交互，由于Django中默认使用CSRF约束，推荐使用$.get

示例：实现省市区的选择

将jquery文件拷贝到static/js/目录下

打开booktest/views.py文件，定义视图area1，用于显示下拉列表

#提供显示下拉列表的控件，供用户操作
def area1(request):
 return render(request,'booktest/area1.html')

打开booktest/urls.py文件，配置url

url('^area1/$',views.area1),

在templates/booktest/目录下创建area1.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/static/js/jquery-1.12.4.min.js"></script>
 <script>
  $(function () {
   $.get('/sheng/',function (data) {//{slist:[]}
    var slist=data.slist;//[{},{},{}...]
    var sheng=$('#sheng');
    $.each(slist,function (i,n) {
     //n==>{id:,title:}
     sheng.append('<option value="'+n.id+'">'+n.title+'</option>')
    });
   });
   $('#sheng').change(function () {
    var sid=$(this).val();
    if(sid!='0'){
     $.get('/shi/',{'sid':sid},function (data) {
      var slist=data.slist;
      var shi=$('#shi').empty().append('<option value="0">请选择</option>');
      $('#qu').empty().append('<option value="0">请选择</option>');
      $.each(slist,function (i,n) {
       shi.append('<option value="'+n.id+'">'+n.title+'</option>');
      });
     });
    }
   });
   $('#shi').change(function () {
    var sid=$(this).val();
    if(sid!='0'){
     $.get('/shi/',{'sid':sid},function (data) {
      var slist=data.slist;
      var shi=$('#qu').empty().append('<option value="0">请选择</option>');
      $.each(slist,function (i,n) {
       shi.append('<option value="'+n.id+'">'+n.title+'</option>');
      });
     });
    }
   });
  });
 </script>
</head>
<body>
<select id="sheng">
 <option value="0">请选择</option>
</select>
<select id="shi">
 <option value="0">请选择</option>
</select>
<select id="qu">
 <option value="0">请选择</option>
</select>
</body>
</html>

运行服务器，在浏览器中输入如下网址

http://127.0.0.1:8000/area1/

浏览效果如下图

使用jquery与ajax进行数据交互 - 文章图片

打开booktest/views.py文件，定义视图sheng，用于获取省信息

url('^sheng/$',views.sheng),

使用jquery与ajax进行数据交互 - 文章图片使用jquery与ajax进行数据交互 - 文章图片

from django.http import JsonResponse
def sheng(request):
 slist=AreaInfo.objects.filter(aParentisnull=True)
 '''
 [{id:,title:},{},{}]
 '''
 slist2=[]
 for s in slist:
  slist2.append({'id':s.id,'title':s.atitle})
 return JsonResponse({'slist':slist2})

打开booktest/urls.py文件，配置url

url('^sheng/$',views.sheng),

在浏览器中输入如下网址

http://127.0.0.1:8000/sheng/

打开booktest/views.py文件，定义视图shi，用于根据编号获取对应的子级信息，如果传递的是省编号则获取市信息，如果传递的是市编号则获取区县信息

#根据pid查询子级区域信息
def shi(request):
 sid=request.GET.get('sid')
 slist=AreaInfo.objects.filter(aParent_id=sid)
 slist2=[]
 for s in slist:
  slist2.append({'id':s.id,'title':s.atitle})
 return JsonResponse({'slist':slist2})

打开booktest/urls.py文件，配置url

url('^shi/$',views.shi),

在浏览器中输入如下网址

http://127.0.0.1:8000/shi/?sid=140000/

在浏览器中输入如下网址

http://127.0.0.1:8000/shi/

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：



以上就是使用jquery与ajax进行数据交互的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的使用jquery与ajax进行数据交互全部内容，希望文章能够帮你解决使用jquery与ajax进行数据交互所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/292093.html

来源：【匿名】