form 精华 jquery js

Get 和 Post 区别 (2008-12-8)
post请求无长度限制
get有长度限制，最长不超过2048字节（2k, 1024个汉字）

表单提交中get和post方式的区别

1.get是从服务器上获取数据，post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。
用户看不到这个过程。

3.对于get方式，服务器端用Request.QueryString获取变量的值，
对于post方式，服务器端用Request.Form获取提交的数据。

4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
但理论上，IIS4中最大量为80KB，IIS5中为100KB。

5.get安全性非常低，post安全性较高。


1.通用函数

function getDataAjax( url,showContentDiv ) {
$('#'+showContentDiv).html("<div style='background:yellow;'><img src='images/qa/loading2.gif' ></img> 请稍候 ...</div>");
$('#'+showContentDiv).show();
$.get(url,function(data){ $('#'+showContentDiv).html(data); });
}

function loadHtml( divId,htmlUrl ) {
$('#'+divId).show();//$('#'+divId).show();
$('#'+divId).load(htmlUrl);
}

function resetForm( formId ) {
$('#'+formId).resetForm();
}

function submitForm( formId,postUrl,statusId ) {
$('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
$('#'+statusId).show();
formAllValue = $('#'+formId).formSerialize();
$.ajax({
type: "POST",
url: postUrl,
data: formAllValue,
success: function(data) {
$('#'+statusId).html(data);
}
});
}

function submitFormJump( formId,postUrl,statusId,jumpUrl ) {
$('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
$('#'+statusId).show();
formAllValue = $('#'+formId).formSerialize();//serialize();
$.ajax({
type: "POST",
url: postUrl,
data: formAllValue,
success: function(data) {
$('#'+statusId).html(data+'<span style="background:yellow;width:20px;margin-left:10px;">页面跳转中...< /span>');
document.location.href = jumpUrl;
}
});
}

function submitStr( strValue,postUrl,statusId ) {
$('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
$('#'+statusId).show();
$.ajax({
type: "POST",
url: postUrl,
data: strValue,
success: function(data) {
$('#'+statusId).html(data);
}
});
}

function submitStrJump( strValue,postUrl,statusId,jumpUrl ) {
$('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
$('#'+statusId).show();
$.ajax({
type: "POST",
url: postUrl,
data: strValue,
success: function(data) {
$('#'+statusId).html(data+'<span style="background:yellow;width:20px;margin-left:10px;">页面跳转中...< /span>');
document.location.href = jumpUrl;
}
});
}

function toggleShowHide( divId ) {
$('#'+divId).toggleClass('hide');
}

function hideDiv( divId ) {
$('#'+divId).hide();//$('#'+divId).attr("style","display:none;");
}

function jumpUrl( jumpUrl ) {
document.location.href = jumpUrl;
}

function disableButton( buttonId,buttonValue ) {
$('#'+buttonId).attr('disabled',true);
if( buttonValue!='' ) {
$('#'+buttonId).attr('value',buttonValue);
}
}

function submitFormDefault( formId ) {
$('#'+formId).submit();
}


2.表單傳值

返回json结构
dataType:"json"

function updateBbsEditForm() {
$('#status_bbs_edit').html('<img src="template/images/loading2.gif"></img> 请稍候...');
$('#status_bbs_edit').show();
formAllValue = $('#form_bbs_edit').serialize();
$.ajax({
type: "POST",
url: 'index.php?action=bbs&type=edit_bbs_update',
data: formAllValue,
dataType:"json",
success: function(data) {
var int_num_id = $('#int_num_id').val();
if( data.disp==1 ) {
$('#div_button_release_'+int_num_id).html($('#hidden_div_button_release_yet_'+int_num_id).html());
} else {
$('#div_button_release_'+int_num_id).html($('#hidden_div_button_release_'+int_num_id).html());
}
$('#status_bbs_edit').html(data.tip);
}

});
}


echo json_encode(array('tip'=>$str_tip,'disp'=>$bln_disp));


3.表單提交重置

$('#form_login').clearForm();//jquery.form.js
$('#form_login').submit();//jquery.form.js
$('#str_role').attr('value','1');
$('#status_add_ad').hide();
$('#str_edu').val('');
$('#str_enroll_date').val('2001');
$('input[@name=str_term]').get(0).checked = true;

function resetBbsAddForm() {
$('#form_bbs_add').clearForm();
$('#int_sub_type').val('1');
$('#int_disp_order').val('0');
}


4.checkbox選中

$('input[@name=str_term]').get(0).checked = true;
bbs_status = $('input[@name=int_status_flag][@checked]').val();

所有选中的radio
$("input[@type=radio][@checked]")

function selectAllCheckbox() {
var checked = $('#checkbox_select').get(0).checked;
$('#checkbox_toggle').get(0).checked = false;
$('#checkbox_search_not').get(0).checked = false;
$('#checkbox_basic').get(0).checked = false;
var inputs = document.getElementsByTagName('input');
var inputsLen = inputs.length;
for( var i=5;i<inputsLen;i++ ) {
if( inputs[i].type.toLowerCase()=='checkbox' ) {
inputs[i].checked = checked;
}
}
}

function toggleAllCheckbox() {
$('#checkbox_select').get(0).checked = false;
$('#checkbox_toggle').get(0).checked = true;
$('#checkbox_search_not').get(0).checked = false;
$('#checkbox_basic').get(0).checked = false;
var inputs = document.getElementsByTagName('input');
var inputsLen = inputs.length;
for( var i=5;i<inputsLen;i++ ) {
if( inputs[i].type.toLowerCase()=='checkbox' ) {
inputs[i].checked = !inputs[i].checked;
}
}
}

function cancelAllCheckboxSelected() {
var inputs = document.getElementsByTagName('input');
var inputsLen = inputs.length;
for( var i=5;i<inputsLen;i++ ) {
if( inputs[i].type.toLowerCase()=='checkbox' ) {
inputs[i].checked = false;
}
}
}


制作插件

全选|取消

//插件
$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;

case 'off':
this.checked = false;
break;

case 'toggle':
this.checked = !this.checked;
break;
}
});
};


$(function() {
$('#selectAll').toggle(
function() {
$("input[@type=checkbox]").check('off');
},
function() {
$("input[@type=checkbox]").check('on');
}
)

});


<span id="selectAll">全选</span>
<input type="checkbox" />1
<input type="checkbox" />2
<input type="checkbox" />3


5.改變,獲取頁面元素屬性

$(this).attr('src','index.php?action=register&type=create_pin_code'+"&"+Math.random());
$('#str_role').attr('value','1');
$('#str_edu').val('');
$('#str_enroll_date').val('2001');


$('#str_sex_preview').html($('input[@name*=str_sex][@checked]').attr("title"));
$('#str_edu_preview').html($("select[@name=str_edu] option[@selected]").text());
$('#str_job_preview').html($("select[@name=str_job] option[@selected]").text());
$('#str_area_preview').html($("select[@name=str_area] option[@selected]").text());

$('#str_interest_preview').html(get_interest());
$('#str_photo_preview').html(get_iframe_document("iframe_upload_photo").getElementById('show_photo').innerHTML);


/**
* get string about interest
* @param type 1:title 2:value
* @author andy
*/
var get_interest = function( type ) {
var attr_type;
if( type==2 ) {
attr_type = "value";
} else {
attr_type = "title";
}
var arr_interest = new Array();
$('input[@name*=str_interest][@checked]').each(function(i) {
arr_interest[i] = $(this).attr(attr_type);
});
if( arr_interest.length!=0 ) {
str_interest = arr_interest.join();
} else {
str_interest = '';
}
return str_interest;
}

var get_iframe_document = function( iframeId ) {
var iframe = null;
if ( document.getElementById(iframeId).contentWindow.document ) {//if contentDocument exists, W3C compliant (Mozilla)
iframe = document.getElementById(iframeId).contentWindow.document;
} else {//IE
iframe = document.frames[iframeId].document;
}
return iframe;
}