Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

js实现两个数的和:

///模板方面/////
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
<p>输入<input type="text" id="t1"></p>
<p>输入<input type="text" id="t2"></p>
<p><button class="btn">计算和</button><span class="sum"></span></p>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
    $('.btn').click(function () {
        $.ajax({
            url:'/sum2/',
            type:"POST",
            data:({
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                t1:$('#t1').val(),
                t2:$('#t2').val()
            }),
            success:function (sum) {
                var sum=JSON.parse(sum);
                $('.sum').html(sum)

            }
        })
    })

</script>
</html>



///视图方面/////

def sum(request):
    # t1=request.GET.get('t1')
    # t2=request.GET.get('t2')
    # print(t1)
    return render(request,'sum.html')


def sum2(request):
    t1=request.GET.get('t1')
    t2=request.GET.get('t2')


    return HttpResponse(json.dumps(int(t1)+int(t2)))

 

用Ajax实现表的删除操作：

///////模板方面/////////

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>实现计算器的功能</h3>
<div class="bs-example" data-example-id="contextual-table">
    <table class="table">
      <thead>
        <tr>

          <th>序号</th>
          <th>用户名</th>
          <th>密码</th>
        </tr>
      </thead>
      <tbody>
      {% for user in user_list %}
      <tr class="active">


                <td class="id">{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.password }}</td>

            

          
          <td><button>删除</button></td>
        </tr>
{% endfor %}
      </tbody>
    </table>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
    $('button').click(function () {
        $.ajax({
            url:'/list_ajax/',
            type:'get',
            data:({
                id:$(this).parent().parent().children().first().text()
            }),
            success:function (id) {
                var id=JSON.parse(id);

                console.log($(this));
                $('.id').each(function () {
                    if($(this).html()==id){
                        $(this).parent().remove()
                    }
                })
{#                $(this).parent().parent().remove()#}

            }

        })
    })
</script>
</html>



///////视图方面/////////

def list(request):
    user_list=models.UserInfo.objects.all()
    return render(request,'list.html',{'user_list':user_list})


def list_ajax(request):
    id=request.GET.get('id')
    models.UserInfo.objects.filter(id=id).delete()
    return HttpResponse(json.dumps(id))

 

 

posted @ 2017-11-14 19:19  TAMAYURA  阅读(225)  评论(0)  编辑  收藏  举报