ajax

1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json
2 ajax干啥用的?前后端做数据交互:
3 之前学的跟后台做交互的方式:
-第一种:在浏览器窗口输入地址(get)
-第二种:用form表单提交数据
4 特点:
-异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)
-局部刷新:

 $(".btn").click(function () {
        $.ajax({
            url:'/index/',
            type:'post',
            //data:往后台提交的数据
            data:{'name':'lqz','age':18},
            //成功的时候回调这个函数
            success:function (data) {
                alert(data)
            }
        })

5 ajax小实例（例子：1+1=2）

在视图里：

def add(request):
    if request.method=='GET':
        return render(request,'add.html')
    add1=request.POST.get('add1')
    add2=request.POST.get('add2')
    sum=int(add1)+int(add2)
    return HttpResponse(sum)

在html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/jquery-3.3.1/jquery-3.3.1.js"></script>
    <title>Title</title>
</head>
<body>
<p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p>
<button class="btn">点我</button>
</body>

<script>
    $(".btn").click(function () {
        $.ajax({
            url:'add',
            type:'post',
            //$("#add1").val() 取到id为add1这个控件的value值
            data:{'add1':$("#add1").val(),'add2':$("#add2").val()},
            success:function (data) {
                {#alert(data)#}
                //赋值
                $("#sum").val(data)

                {#location.href='/index/'#}
            }
        })
    })
</script>
posted @ 2018-11-19 20:06  空杯人  阅读(121)  评论(0)  编辑  收藏  举报