ajax实现图片点击的局部刷新

点击图片刷新文本框的内容

结合ajax来实现，给图片添加一个onclick事件，ajax添加事件处理逻辑，在收到后端的response后对文本框的内容进行刷新。

代码

前端代码：

<p>图片点击</p>
<img width="20" height="20" src="/static_0/image/flush.jpg" onclick="FlushImg();">
<input id="1i">

<script src="{% static '/js/jquery.min.js' %}"></script>
<script>
    function FlushImg(){
        /*2、get方式请求数据*/
        $.ajax({
            url:"{% url 'flush' %}",
            type:'GET',
            success: function (data) {
                $('#1i').val(data)
            }
        });
    }
</script>

后端代码

#urls.py
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'^flush_input/', views.flush_input, name='flush')
]

#views.py
from django.shortcuts import render, HttpResponse
from  django.http import JsonResponse
# Create your views here.

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


def flush_input(request):
    return JsonResponse('123', safe=False)

前端展示

点击图片刷新另一个img标签的内容

原理和替换文本框一致，主要的是对img标签中的src的内容进行替换$('#flush_img').attr('src', data)

代码

前端代码

<p>刷新图片</p>
<img width="20" height="20" src="/static_0/image/flush.jpg" onclick="FlushImg();">
<img src="{% static 'image/th.jpg' %}" id="flush_img">

<script src="{% static '/js/jquery.min.js' %}"></script>
<script>
    function FlushImg(){
        $.ajax({
            url:"/flush_img",
            type:'GET',
            success: function (data) {
                $('#flush_img').attr('src', data)
            },
        })
    }
</script>

后端代码

def flush_img(request):
    return JsonResponse('/static_0/image/dog.jpg', safe=False)