DJANGO 使用 AJAX 來實現即時編輯資訊的動作 @ 嘎抓不露閣

為什麼要這樣做咧??

因為我們不想要使用舊式的from表單來送整頁的資料，每次都重新整理

讓使用者感覺到操作非常的麻煩，不順暢

如果他可以點一個欄位就修改一個欄位，這是最理想的操作方式了

以下就分各部份來說明如何來實現這個動作

在HTML部分如下：


如果是Text欄位(一般的文字、數字欄位)

<td class="ClickShowInfo" row_id="{{ row.id }}" field_name="telphone">
    <a id="show_part_telphone_{{ row.id }}">
    	{{ row.telphone|default_if_none:"" }}
    </a>
    <input
	id="edit_part_telphone_{{ row.id }}" 
    type="text" class="BlurUpdateInfo" style="display: none;"
    field_type="str"
    row_id="{{ row.id }}"
    field_name="telphone"
    table_name="UserProfile"
    old_value="{{ row.telphone|default_if_none:"" }}"
    value="{{ row.telphone|default_if_none:"" }}"/>
</td>


如果是Textarea欄位(如說明欄位)

<td class="ClickShowInfo" row_id="{{ row.id }}" field_name="memo">
	<a id="show_part_memo_{{ row.id }}">
    	{{ row.memo|linebreaks|default_if_none:"" }}
    </a>
	<textarea
	id="edit_part_memo_{{ row.id }}" 
    class="BlurUpdateInfo" style="display: none;"
    field_type="str"
    row_id="{{ row.id }}"
    field_name="memo"
    table_name="UserProfile"
    old_value="{{ row.memo|default_if_none:"" }}"/>
	cols="40" rows="5">{{ row.memo|default_if_none:"" }}</textarea>
</td>


如果是Select欄位(一般用在ForeignKey欄位，例如縣市、單位等等)

<td class="ClickShowInfo" row_id="{{ row.id }}" field_name="place">
	<a id="show_part_memo_{{ row.id }}">
    	{{ row.place.name }}
    </a>
	<select class="ClickShowInfo"
	id="edit_part_place_{{ row.id }}" 
    class="BlurUpdateInfo" style="display: none;"
    field_type="select"
    row_id="{{ row.id }}"
    field_name="place"
    table_name="UserProfile"
    old_value="{{ row.place.id }}">
		<option value="" {% if not row.place %}selected="selected"{% endif %}>
			請選擇
		</option>
		{% for p in places %}
			<option value="{{ p.id }}" {% ifequal row.place p %}selected="selected"{% endifequal %>
				{{ p.name }}
			</option>
		{% endfor %}
	</select>
</td>

然後再JavaScript部分開始整理所需的資料，如下：


//進行(顯示部分-輸入框)物件切換
function ClickShowInfo(){
    var $obj = $(this);
    var field_name = $obj.attr('field_name');
    var row_id = $obj.attr('row_id');
    $('#show_part_'+field_name+"_"+row_id).hide();
    $('#edit_part_'+field_name+"_"+row_id).show().focus();
}

//送資料
function BlurUpdateInfo(){
	//整理欄位資訊
    var $obj = $(this);
    var row_id = $obj.attr('row_id');
    var field_type = $obj.attr('field_type');
    var field_name = $obj.attr('name');
    var table_name = $obj.attr('table_name');
    var value = $obj.attr('value');
    var old_value = $obj.attr('old_value');
    var int_check=/^-?[0-9]*$/;
    var float_check=/^[1-9]d*.d*|0.d*[1-9]d*$/;
    var date_check=/^(([1-9]\d{0,3}|0)\-\d{2}\-\d{2})|(([1-9]\d{0,3}|0)\.\d{2}\.\d{2})|(([1-9]\d{0,3}|0)\/\d{2}\/\d{2})$/;
    var email_check=/^[a-z0-9][-a-z0-9\.]*@([a-z0-9-]+\.)+[a-z]+$/;
    //檢查各種格式是否正確
    if (field_type=='int' && value){
    	if(!(int_check.test(value))){
            var message = field_name + '須為整數！';
            alert(message);
            return false;
        }
    }
    if (field_type=='float' && value){
    	if(!(float_check.test(value))){
            var message = field_name + '須為數字！';
            alert(message);
            return false;
        }
    }
    if (field_type=='date' && value){
    	if(!(date_check.test(value))){
            var message = field_name + '須為日期格式(如2013-01-19)！';
            alert(message);
            return false;
        }
    }
    if (field_type=='email' && value){
    	if(!(email_check.test(value))){
            var message = field_name + '須為Email格式！';
            alert(message);
            return false;
        }
    }
    //送資料到views.py
    if (value!=old_value){
        $.ajax({ url:"/your_app_name/ajax/", type: "POST", data:{submit: "BlurUpdateInfo",
            row_id: row_id, field_name: field_name, table_name: table_name,
            field_type: field_type, value: value
        }, dataType:"json", success:function(data){
            if(data["status"]){
            	//修改html資訊
                $('#edit_part_'+field_name+"_"+row_id).attr('value', data['return_value']);
                $('#edit_part_'+field_name+"_"+row_id).attr('old_value', data['return_value']);
                $('#show_part_'+field_name+"_"+row_id).html(data['return_value_ch']);
            } else {
            	//若修改失敗要把被修改的值改為原資料值
                $('#edit_part_'+field_name+"_"+row_id).attr('value', old_value);
                alert(data['error_message']);
            }
        }});
    }
    //將顯示物件切換回來
    $('#show_part_'+field_name+"_"+row_id).show();
    $('#edit_part_'+field_name+"_"+row_id).hide();
}


$(document).ready(function(){
	$('.ClickShowInfo').click(ClickShowInfo);
	$('.BlurUpdateInfo').blur(BlurUpdateInfo);
}

再來就是Django的部分了

第一部分是urls.py


urlpatterns = patterns('apps.project.views',
    (r'^ajax/$', 'AJAX'),
)

第二部分是views.py


def AJAX(R):
    submit = R.GET.get('submit', '')
    html = False
    if not submit: submit = R.POST.get('submit', '')

    if 'BlurUpdateInfo' == submit:
        result = BlurUpdateInfo(R)

    else:
        result = {'status': False, 'message': u'未指定方法'}

    if html: return HttpResponse(result)
    else: return HttpResponse(json.dumps(result))


def BlurUpdateInfo(R):
    row_id = R.POST.get('row_id')
    field_name = R.POST.get('field_name')
    field_type = R.POST.get('field_type')
    table_name = R.POST.get('table_name')
    value = R.POST.get('value')
    return_value = value
    return_value_ch = value
    if table_name == 'UserProfile':
    	row = UserProfile.objects.get(id=row_id)

    if field_type == 'float':
    	if value:
    		value = str(value)
    	else:
    		value = '0'
    		return_value = '0'
    		return_value_ch = '0'
    elif field_type == 'int':
    	if not value:
    		value = 0
    		return_value = 0
    		return_value_ch = 0
    elif field_type == 'select':
    	if value:
	    	if field_name == 'place':
	    		value = Place.objects.get(id=value)
	    		return_value = value.id
	    		return_value_ch = value.name
	    else:
	    	value = None
	    	return_value = ''
    		return_value_ch = '請選擇'

    if not value:
    	value = None
    
    setattr(row, field_name, value)
    row.save()

    return {'status': True, 'return_value': return_value}

好了，大致上就是這樣，當然還是要依照你的資歷格式或需要輸入的資料來進行微調

但是萬變不離其宗阿