jquery agax 最小化例子

jquery ajax 最小化例子

1. 新建templates下 html

{% load static %}

请输入两个数字

a:
b:

result:

提交

<script src="{% static 'jquery/jquery.js' %}"></script>
<script>

//这里是关键点 .ready 函数好像监听器。
        $(document).ready(function () {
//jq的处理函数，当点击提交按钮时执行。
            $("#sum").click(function () {
//得到页面中id为a和b两个标签的值
                var a = $("#a").val();
                var b = $("#b").val();
                //var task = document.getElementById("task").innerText
//向服务器发送get请求，请求地址为demo_add
                $.get("demo_ajax/demo_add/", { 'a': a, 'b': b}, function (ret) {
//请求结果为ret，将请求结果赋值给id为result的节点
                    $('#result').html(ret)
                })
            });
        });
    </script>
</body>
</html>

2. 下载 jquery.js 文件，并放置 static 下

可以下载

3. 新增 views.py 方法

   def demo_ajax(request):
   print(request)
   return render(request, ‘demo_ajax.html’)

   def demo_add(request):
   a=request.GET[‘a’]
   b=request.GET[‘b’]
   if request.is_ajax():
   ajax_string = 'ajax request: ’
   else:
   ajax_string = 'not ajax request: ’

   c = int(a) + int(b)
   r = HttpResponse(ajax_string + str(c))
   return r
   

4. 修改 app 的 urls.py 文件，新增 views.py的path

   path('demo_ajax/', views.demo_ajax),
   path('demo_ajax/demo_add/', views.demo_add),