python ajax高并发,Python之路64-Ajax(示例代码)

目录

一、Ajax提交表单

二、Ajax提交表单升级版

三、一些使用的注意事项

一、Ajax提交表单

Ajax提交表单，获取标签数据后将数据提交给后台，后台做出判断，完后返回值，Ajax接收到返回值执行回调函数，根据返回值的不同做不同的操作

默认form提交会刷新页面，而Ajax提交不会刷新页面，而是根据后台返回信息来做进一步操作

urls.pyfrom django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

url(r‘^admin/‘, admin.site.urls),

url(r‘^business$‘, views.business),

url(r‘^host$‘, views.host),

url(r‘^test_ajax$‘, views.test_ajax),

]

views.pydef test_ajax(request):

h = request.POST.get("hostname")

i = request.POST.get("ip")

p = request.POST.get("port")

b = request.POST.get("b_id")

if h and len(h) > 5:

models.Host.objects.create(hostname=h,

ip=i,

port=p,

# b=models.Business.objects.get(id=b),

b_id=b)

return HttpResponse("OK")

else:

return HttpResponse("太短了")

host.htmlhtml>

Title

.hide{

display: none;

}

.shade{

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: black;

opacity: 0.6;

z-index: 5;

}

.add-model{

position: fixed;

height: 300px;

width: 400px;

top: 50%;

left: 50%;

margin-top: -150px;

margin-left: -200px;

background-color: white;

border: 1px solid red;

z-index: 10;

}

主机列表(对象)

序号主机名IP端口业务线名称

{% for row in v1 %}

{{ forloop.counter }}{{ row.hostname }}{{ row.ip }}{{ row.port }}{{ row.b.caption }}

{% endfor %}

主机列表(字典)

主机名业务线名称

{% for row in v2 %}

{{ row.hostname }}{{ row.b__caption }}

{% endfor %}

主机列表(元祖)

主机名业务线名称

{% for row in v3 %}

{{ row.1 }}{{ row.3 }}

{% endfor %}

{% for op in b_list %}

{{ op.caption }}

{% endfor %}

悄悄提交

$(function () {

$("#add_host").click(function () {

$(".shade,.add-model").removeClass("hide");

});

});

$(function () {

$("#cancel").click(function () {

$(".shade,.add-model").addClass("hide");

});

});

$(function () {

$("#ajax_submit").click(function () {

$.ajax({

url: "/test_ajax",

type: "POST",

data: {"hostname": $("#host").val(), "ip": $("#ip").val(), "port": $("#port").val(), "b_id": $("#sel").val()},

success: function (data) {

if(data == "OK"){

location.reload();

}else{

alert(data);

}

}

});

});

});

二、Ajax提交表单升级版

urls.pyfrom django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

url(r‘^admin/‘, admin.site.urls),

url(r‘^business$‘, views.business),

url(r‘^host$‘, views.host),

url(r‘^test_ajax$‘, views.test_ajax),

]

views.pydef test_ajax(request):

import json

ret = {"status": True, "error": None, "data": None}

try:

h = request.POST.get("hostname")

i = request.POST.get("ip")

p = request.POST.get("port")

b = request.POST.get("b_id")

if h and len(h) > 5:

models.Host.objects.create(hostname=h,

ip=i,

port=p,

# b=models.Business.objects.get(id=b),

b_id=b)

else:

ret["status"] = False

ret["error"] = "太短了"

except Exception as e:

ret["status"] = False

ret["error"] = "请求错误"

return HttpResponse(json.dumps(ret))

host.htmlhtml>

Title

.hide{

display: none;

}

.shade{

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: black;

opacity: 0.6;

z-index: 5;

}

.add-model{

position: fixed;

height: 300px;

width: 400px;

top: 50%;

left: 50%;

margin-top: -150px;

margin-left: -200px;

background-color: white;

border: 1px solid red;

z-index: 10;

}

主机列表(对象)

序号主机名IP端口业务线名称

{% for row in v1 %}

{{ forloop.counter }}{{ row.hostname }}{{ row.ip }}{{ row.port }}{{ row.b.caption }}

{% endfor %}

主机列表(字典)

主机名业务线名称

{% for row in v2 %}

{{ row.hostname }}{{ row.b__caption }}

{% endfor %}

主机列表(元祖)

主机名业务线名称

{% for row in v3 %}

{{ row.1 }}{{ row.3 }}

{% endfor %}

{% for op in b_list %}

{{ op.caption }}

{% endfor %}

悄悄提交

$(function () {

$("#add_host").click(function () {

$(".shade,.add-model").removeClass("hide");

});

});

$(function () {

$("#cancel").click(function () {

$(".shade,.add-model").addClass("hide");

});

});

$(function () {

$("#ajax_submit").click(function () {

$.ajax({

url: "/test_ajax",

type: "POST",

data: {"hostname": $("#host").val(), "ip": $("#ip").val(), "port": $("#port").val(), "b_id": $("#sel").val()},

success: function (data) {

var obj = JSON.parse(data);

if(obj.status){

location.reload();

}else{

$("#error_msg").text(obj.error);

}

}

});

});

});

三、一些使用的注意事项

1.基本使用$.ajax({

url: "/host",

type: "POST",

data: {"k1": 123, "k2": "root"},

success: function(data){

}

})

get封装了$.ajax(),type为get

$.get(url="xxx", data={}, success=function(data){

});

get封装了$.ajax(),type为post

$.post(url="xxx", data={}, success=function(data){

});

2.永远让服务器返回一个字典return HttpResponse(json.dumps(字典))

3.前端接收到json数据

可以用JSON.parse(data)，将字符串转换成对象

取对象中的值的时候，可以用.来取(json)