JQueqy Ajax的使用(get请求)

1,预备JSON知识

2，我们之前的学过的发送请求方式

　　1，直接在地址栏中输入URL回车  ，GET请求

　　2，FORM表单提交     POST/GET请求

　　3，a标签形式　　GET请求

　　4，AJAX　　　　GET/POST请求

3，AJAX特点

　　1，异步

　　2，局部刷新  （注：一般注册时自动判断用户名，密码是否理）

 以下是局部刷新代码示例：

前端html页面输入两个整数，通过AJAX传输到后端计算(在views.py函数中)出结果并返回。

说明：

使用的是 return HttpResponse() 返回数据 ，

是因为render()方法，返回的是整个HTML页面代码给前端，前端jajax使用回调函数接受一大串HTML代码没有任何意义，而HttpResponse()仅仅返回我们需要的数据。

如果使用了ajax向后端发送数据，就没有必要再使用form表单的commit提交了，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AJAX局部刷新实例</title>
</head>
<body>

<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1">
<!-- 以下是导入JQUERY -->
<script src="/static/jquery-3.3.1.js"></script>
<!-- 以下是使用jquery版的ajax请求 -->
<script>
// 添加点击事件，定义回调函数，当点击#b1元素时，则执行函数
  $("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/", // 向哪里发请求，所以就没有必要再使用form表单的跳转和提交了
      type:"GET",  //可以使用POST，或GET都可以
      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},  //使用jquery获取DOM元素的值，并传递到后端
      success:function (data) {   //发送AJAX请坟成功后，执行回调函数，data则是获取的后端数据，
        $("#i3").val(data);   //给DOM元素设置值
      }
    })
  })
</script>
</body>
</html>
html页面 index.html
# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.


def index(request):
    return render(request,'index.html')

def ajax_add(request):
    print (request.GET.get('i1'))
    print (request.GET.get('i2'))
    i1=int(request.GET.get('i1'))
    i2=int(request.GET.get('i2'))
    ret=i1+i2
    return HttpResponse(ret)
views.py中接受ajax请求数据并处理后返回
from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/$',views.index),
    url(r'^ajax_add/$',views.ajax_add),
]
urls.py代码

-----------------在浏览器中执行------------------------------------------------------------------ 

以上截图，输入数据后，点击提交，则会自动算出结果，并将值写入对应的DOM元素， 并不刷新页面。

 

posted @ 2018-06-27 22:19  虫儿要吃草  阅读(473)  评论(0)  编辑  收藏  举报