Ajax JS

Posted 2020-10-19 12兵哥哥

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.py
	url(r‘^test_ajax$‘, views.test_ajax),

app中的views.py
	def 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.py
	def 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>