Ajax

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

• ajax（本质；推荐）

   ?$.ajax({ ?????url: "/test_ajax", ?????type: ‘POST‘, ?????// data: {‘k1‘: 123, ‘k2‘: ‘aa}, ?data: $(‘#add_form‘).serialize(), # form表单打包发给服务器端 ?// data是服务器端返回的字符串 ?????success: function(data){ ?var obj = JSON.parse(data); ???????..... ?????} ?})

• $.get(url=‘xx‘, data={}, success=xxx)

  • 实际调用ajax，type为get

• $.getJson

• $.post

  • 实际调用ajax，type为post

• app的views.py

  • return HttpResponse(json.dumps(字典)) # 推荐
  • return render(xxx) # 仅能返回对象类型，例如字典、列表、元组
  • return redirect(xxx) # 不用，用了也没效果，ajax不刷新

举例1

html文件<a id="ajax_submit" >悄悄提交</a><input id="host" type="text" placeholder="主机名" name="hostname" /><script>$(‘#ajax_submit‘).click(function(){ ???????????????$.ajax({ ???????????????????url: "/test_ajax", ???????????????????type: ‘POST‘, ???????????????????// data: {‘hostname‘: $(‘#host‘).val(), ‘ip‘: $(‘#ip‘).val(), ‘port‘: $(‘#port‘).val(), ‘b_id‘: $(‘#sel‘).val()},data: $(‘#add_form‘).serialize(), ???????????????????success: function(data){ ??????????????????????if (data == ‘OK‘){ ??????????????????????????location.reload() ???????????????????????}else{ ??????????????????????????alert(data) ??????????????????????} ???????????????????} ???????????????}) ????????});</script>工程中urls.pyurl(r‘^test_ajax$‘, views.test_ajax),app中的views.pydef test_ajax(request): ???h = request.POST.get(‘hostname‘) ???i = request.POST.get(‘ip‘) ???p = request.POST.get(‘port‘) ???b = request.POST.get(‘b_id‘) ???if h and len(h) > 5: ???????models.Host.objects.create(hostname=h, ??????????????????????????????????ip=i, ??????????????????????????????????port=p, ??????????????????????????????????b_id=b) ???????return HttpResponse(‘OK‘) ???else: ???????return HttpResponse("太短了")缺陷：数据类型错误，用户不感知

举例1:（改善）

html文件<span id="erro_msg" style="color: red"></span><script>$(‘#ajax_submit‘).click(function(){ ???????????????$.ajax({ ???????????????????url: "/test_ajax", ???????????????????type: ‘POST‘, ???????????????????// data: {‘hostname‘: $(‘#host‘).val(), ‘ip‘: $(‘#ip‘).val(), ‘port‘: $(‘#port‘).val(), ‘b_id‘: $(‘#sel‘).val()},data: $(‘#add_form‘).serialize(), ???????????????????success: function(data){ ??????????????????????var obj = JSON.parse(data); ???????????????????????if(obj.status){ ???????????????????????????location.reload(); ???????????????????????}else{ ???????????????????????????$(‘#erro_msg‘).text(obj.error); ???????????????????????} ???????????????????} ???????????????}) ????????}); ???</script>app中的views.pydef test_ajax(request): ???ret = {‘status‘: True, ‘error‘: None, ‘data‘: None} ???try: ???????h = request.POST.get(‘hostname‘) ???????i = request.POST.get(‘ip‘) ???????p = request.POST.get(‘port‘) ???????b = request.POST.get(‘b_id‘) ???????if h and len(h) > 5: ???????????models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b) ???????else: ???????????ret[‘status‘] = False ???????????ret[‘error‘] = "太短了" ???except Exception as e: ???????ret[‘status‘] = False ???????ret[‘error‘] = ‘请求错误‘ ???return HttpResponse(json.dumps(ret))

JS

• 字符串转对象

  var obj = JSON.parse(data);

• 对象转字符串

  JSON.stringify([1,2, 3])

• json对象，通过点操作

• 页面刷新

  location.reload();

• 获取对象值

  $(‘#edit_form‘).find(‘select‘).val();

• 设置对象值

  $(‘#edit_form‘).find(‘select‘).val("4");

  $(‘#edit_form‘).find(‘select‘).val(1);

• 绑定事件

  • class

     ?<tr hid="{{ row.nid }}" bid="{{ row.b_id }}"> ?<td> ?<a class="edit">编辑</a>|<a class="delete">删除</a> ?</td> ?</tr> ???<script> ??$(‘.edit‘).click(function(){ ?????????$(‘.shade,.edit-modal‘).removeClass(‘hide‘); ???????????var bid = $(this).parent().parent().attr(‘bid‘); ?????????var nid = $(this).parent().parent().attr(‘hid‘); ???????????$(‘#edit_form‘).find(‘select‘).val(bid); ?????????$(‘#edit_form‘).find(‘input[name="nid"]‘).val(nid); ?}) ?</script>

  • id

     ?<a id="ajax_submit" >悄悄提交</a> ?<script> ??$(‘#ajax_submit‘).click(function(){ ?.... ??}); ?</script>

  • 举例

     ?CSS ?<style> ?????????.hide{ ?????????????display: none; ?????????} ?????????.shade{ ?????????????.... ?????????} ?????????.add-modal,.edit-modal{ ?????????????.... ?????????} ?????</style> ?html ?<input id="add_host" type="button" value="添加" /> ?<div class="shade hide"></div> ?????<div class="add-modal hide"> ?????????<h3>添加主机信息</h3> ?</div> ?JS ?<script> ??$(function() { ??????????????$(‘#add_host‘).click(function () { ??????????????????$(‘.shade,.add-modal‘).removeClass(‘hide‘); ??????????????}); ??}); ?</script>