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......