Ajax JS

Posted 12兵哥哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax JS相关的知识,希望对你有一定的参考价值。

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>
      

以上是关于Ajax JS的主要内容,如果未能解决你的问题,请参考以下文章

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

(转)博客园登陆__JSEncrypt 分析

ajax与 axios的基础讲解(附代码及接口)

为啥这段js代码设置断点单步调试能够走通,得到结果;但取消断点直接运行就不行了?