Ajax提交方法

Posted 2021-04-15 Devops智能运维

一. Ajax提交语法

$.ajax({
 url: '/host' #提交的路径
 type: 'POST' # 提交的方式
 data:'{'k1':123,'k2':root}' # 向后台提交的数据
 success: function(data) { ## 服务器端返回数据，执行成功之后，然后这里就会触发这个函数 返回的数据就会传到data里面}})

二. Ajax提交代码

2.1 Ajax测试

url(r'^test_ajax$', views.test_ajax),
$('#ajax_submit').click(function () { $.ajax({ url: "/test_ajax", type: 'GET', data: {'user':'root','pwd':123123}, #这里把数据发送过去 success: function (data) { alert(data) // 如果后台执行成功，那么这里就会显示一个弹窗”我把门带上了“ } }) })  def test_ajax(request): ## 获取数据为： ('GET', u'root', u'123123') print (request.method,request.GET.get('user'),request.GET.get('pwd'))
 return HttpResponse("我把门带上了")

2.2 把用户填的数据传过去

1. 先定义id

<div class="edit_modal"> <form id="add_form" method="post" action="/host"> <div> <input id="host" type="text" name="hostname" placeholder="主机名"> </div> <div> <input id="ip" type="text" name="IP" placeholder="ip"> </div>  <div> <input id="port" type="text" name="port" placeholder="port"> </div> <div> <select id="sel" name="b_id"> {% for row in busness %} <option value={{ row.id }}>{{ row.caption }}</option> {% endfor %} </select> </div>  <div> <input type="submit" value="提交"> <a id="ajax_submit" >悄悄提交</a> <input id="cancle" type="button" value="取消"> </div> </form>
 </div>

2. 绑定ajax事件

$('#ajax_submit').click(function () { $.ajax({ url: "/test_ajax", type: 'POST', {# data: {'user':'root','pwd':123123},#} data: { 'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val() }, ## 这里就是刚刚id取到的值 success: function (data) { if (data == "ok") { // 这个后台会发送数据过来，如果是ok的话，就刷新页面 location.reload(); } else { alert(data); // 否则会弹窗data } } }) })

3. 写views后台

def test_ajax(request): # print (request.method,request.GET.get('user'),request.GET.get('pwd')) # print (request.method,request.POST)
 h = request.POST.get("hostname") i = request.POST.get("ip") p = request.POST.get("port") b = request.POST.get("b_id") ## 这里就是把ajax里面的值取到放在后台
 if h and len(h) > 5: ## 这里对取到的数据做判断 models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b) ## 添加到数据库  else: return HttpResponse("主机名太短了") ## 如果不满足上面的要求，则直接返回一个字符串 return HttpResponse("ok") ## 如果满足条件，可以返回一个ok

三. 捕捉异常

3.1 异常捕捉

def test_ajax(request): ret = {'status': True,'error': None,'data':None} //这里先定义一个字典 try: #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_id=b) else: ret['status'] = False ret['error'] = "太短了" except Exception as e: # 捕捉一下异常 ret['status'] = False ret['error'] = "请求错误"
 return HttpResponse(json.dumps(ret)) //返回一个字典

3.2 前端反序列化

success: function (data) { var obj = JSON.parse(data); #将本来属于字符的data，反序列成字典，然后现在就可以以字典的方式来获取数据了 if (obj.status){ #如果status为ture，则刷新页面 location.reload() }else { $('#error_msg').text(obj.error); #否则返回错误信息 } }

Json.parse(data) #将string反序列化成字典JSON.stringify(data) #将字典反序列化成string

四. 几个注意的地方

1. 永远让服务器返回一个字典

2. return HttpResponse(json.dumps(字典))