AJax 笔记
AJax
1、单条数据提交
在上面的原有例子中的html中新增下面html内容
<form action="/user_list/" method="post"> <input type="button" onclick="Ajaxsubmit();" value="提交"/> <table> <thead> <tr> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>80000</td> </tr> <tr> <td>1.1.1.1</td> <td>80000</td> </tr> </tbody> </table> </form> <script type="text/javascript" src="/static/jquery-2.2.1.min.js"></script> <script> function Ajaxsubmit(){ var host = '1.1.1.1'; var port = '8000'; $.ajax({ url:"/ajax_data/", type:'POST', data:{h:host,p:port}, success:function(arg){ } }) } </script>
注释
$.ajax({ url:"/ajax_data/", # 目标URL type:'POST', # 请求方式 data:{h:host,p:port}, # 以h和p为key用户的输入为value：<QueryDict: {u'h': [u'1.1.1.1'], u'p': [u'8000']}> success:function(arg){ }
增加URL和views
url(r'^ajax_data/', views.ajax_data),
def ajax_data(request): print request.POST return HttpResponse('OK')
2、ajax多条数据提交
在原来的基础上修改Jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="/ajax_data/" method="post"> <p>用户：{{ obj.user }}<span>{{ errors.user }}</span></p> <p>密码：{{ obj.pwd }}<span>{{ errors.pwd }}</span></p> <p>端口：{{ obj.port }}<span>{{ errors.port }}</span></p> <p>主机：{{ obj.host }}<span>{{ errors.host }}</span></p> <p>邮箱：{{ obj.email }}<span>{{ errors.email }}</span></p> <p>{{ obj.user_type }}</p> <input type="submit" value="submit" /> </form> <input type="text" value="username" name="user" /> <input type="button" onclick="Ajaxsubmit();" value="提交" /> <table> <thead> <tr> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>8080</td> </tr> <tr> <td>1.1.1.1</td> <td>8080</td> </tr> </tbody> </table> <script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script> <script> function Ajaxsubmit(){ var array_users = [ {'username':'rain'}, {'pwd':'123456'}, {'email':'rain@163.com'} ]; $.ajax({ url:'/ajax_data', type:'POST', data:{data: array_users}, success: function (arg) {
} }) } </script> </body> </html>
点击提交（在server端打印看下）：
<QueryDict: {'data[2][email]': ['rain@163.com'], 'data[0][username]': ['rain'], 'data[1][pwd]': ['123456']}>
上面的结果数据是有问题的！他给咱们做了个加工，咱们没给他传data[1],data[0]了吗？
所以咱们的在ajax增加参数
<script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script> <script> function Ajaxsubmit(){ var array_users = [ {'username':'rain'}, {'pwd':'123456'}, {'email':'rain@163.com'}];
$.ajax({ url:'/ajax_data', type:'POST', tradition: true, data:{data: JSON.stringify(array_users)}, success: function (arg) { } }) } </script>
增加了两项：
# 以原生的模式传过去 tradition: true, # 把数组做一步处理转成字符串 data:{data:JSON.stringify(array_users)},
3、在一个Ajax请求之后，返回信息应该更职业化，不能单单发送一个字符串
下面的例子先用json来做，不过还有一个json response
import json def ajax_data(request): ret = {'status':True,'error':''} try: print request.POST except Exception,e: ret['status'] = False ret['error'] = str(e) #在上面如果他出错我就把他ret[status] = False return HttpResponse(json.dumps(ret))
html的js也得修改下：
<script> function Ajaxsubmit(){ var array_users = [ {'username':'rain'}, {'pwd':'123456'}, {'email':'rain@163.com'} ]; $.ajax({ url:"/ajax_mdata/", type:'POST', tradition: true, data:{data:JSON.stringify(array_users)}, success:function(arg){ var callback_dict = $.parseJSON(arg);//这里把字符串转换为对象 //然后咱们就可以判断 if(callback_dict){//执行成功了 //简单测试 alert('提交成功') }else{//如果为False执行失败了 alert(callback_dict.error) } } }) } </script>
END......
