Django--ajax

需求：

前端通过ajax把数据提交到后台

1、单条提交

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <input type="button" value="ajax提交" onclick="AjaxSubmit();">
    <!--数据应该从标签里获取，这里就不做了，设定了几个值提交。-->
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function AjaxSubmit(){
            var host='1.1.1.1';
            var port='111';
            $.ajax({
                url:'/ajax_data/',
                type:'POST',
                data:{h:host,p:port},
                success: function (arg) {
 
                }
            });
        }
    </script>
</body>
urls.py
1
2
3
4
5
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^ajax_data/', views.ajax_data),
]
app01/views.py
1
2
3
def ajax_data(request):
    print request.POST
    return HttpResponse('ok')
IDE



2、数组提交

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input type="button" value="ajax提交" onclick="AjaxSubmitSet();">
    <!--数据应该从标签里获取，这里就不做了，设定了几个值提交。-->
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function AjaxSubmitSet(){
            var hosts=[{'ip':'1.1.1.1','port':'111'},{'ip':'2.2.2.2','port':'222'}];
            $.ajax({
                url:'/ajax_data_set/',
                type:'POST',
                data:{data:hosts},
                success: function (arg) {
 
                }
            });
        }
    </script>
urls.py
1
2
3
4
5
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^ajax_data_set/', views.ajax_data_set),
]
app01/views.py

1
2
3
def ajax_data_set(request):
    print request.POST
    return HttpResponse('ok')
IDE

刷新页面，点击ajax提交按钮，IDE打印出了如下信息：


        显然不是我们想要的！！！

修改html中ajax提交方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function AjaxSubmitSet(){
    var hosts=[{'ip':'1.1.1.1','port':'111'},{'ip':'2.2.2.2','port':'222'}];
    $.ajax({
        url:'/ajax_data_set/',
        type:'POST',
        tradition:true,
        data:{data:JSON.stringify(hosts)},
        success: function (arg) {
            //返回值是字符串，把它先转化成字典
            //相当于json.loads()，parseJSON将字符串转换成对象
            var callback_dict= $.parseJSON(arg);
            if(callback_dict.status){
                alert('成功');
            }else{
                alert(callback_dict.error);
            }
        }
    });
}
IDE


这样的数据格式我们就方便取值了。

3、返回值

标准的输出：{status：‘true'，error:''}

app01/views.py

1
2
3
4
5
6
7
8
9
import json
def ajax_data_set(request):
    ret = {'status':True,'error':""}    #默认ajax成功返回的格式
    try:                                #如果提交成功，打印提交的数据，返回ret
        print request.POST
    except Exception,e:                 #当出错异常，修改返回值
        ret['status']=False
        ret['error']=str(e)
    return HttpResponse(json.dumps(ret))    #只能返回字符串
html中的ajax
1
2
3
4
5
6
7
8
9
10
success: function (arg) {
    //返回值是字符串，把它先转化成字典
    //相当于json.loads()，parseJSON将字符串转换成对象
    var callback_dict= $.parseJSON(arg);
    if(callback_dict.status){
        alert('成功');
    }else{
        alert(callback_dict.error);
    }
}

browser


制造异常app01/views.py
1
2
try:                               
    print request.PO                #故意写错，抛出异常。
browser​






















posted @ 2016-03-17 11:12  大亮头  阅读(259)  评论(0)  编辑  收藏  举报