第一步,創(chuàng)建一個HTML,html是網(wǎng)頁的基礎(chǔ)與骨架:
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比老城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式老城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋老城地區(qū)。費用合理售后完善,十載實體公司更值得信賴。
第二步、在html中增加測試數(shù)據(jù),定義一個checkbox,目的是使用jquery ajax方法get請求獲取數(shù)據(jù)填充,
第三步、編寫jquery 方法,按鈕點擊時,觸發(fā)事件,將選中的checkbox值獲取,
第四步、打開瀏覽器,打開測試頁面,進行測試:
第五步、完成效果圖。
1.jquery提交數(shù)據(jù)的方式:
(1)第一種jquery序列化提交數(shù)據(jù)方式:
通過id獲取的form表單元素.serialize();
(2)第二種模擬form表單提交元素:
$('#form表單id').attr('method','post');
$('#form表單id'').find('input[name="type"]').val(test);
$('#form表單id').find('input[name="dfrom_to1"]').val(dfrom_to);
$('#form表單id').find('input[name="gt_road_new"]').val(gt_road);
$('#form表id').attr('action',AdminLTE.ctx+'/modules/ltegt/findAllCoverAndInterfere.do');
$('#analysisForm').submit();
2.js提交數(shù)據(jù)的方式:
(1).js提交表單( .submit()方法提交表單 )
function doSearch(){
var action ="%=path%/User_queryAllUser";
document.all.form.action = action;
document.all.form.submit();}
(2).js替代超鏈接( window.location.href )
input type="button" id="modify" value="修改工號" οnclick="modifyEmp(${ myList.employeeId })"
//js不能起名為modify,為敏感關(guān)鍵字
function modifyEmp( employeeId ){
//employeeId 作為js的參數(shù)傳遞進來
window.location.href = '%=path%/User_openUserUpdate?employeeId='+employeeId;
jQuery是不能直接從數(shù)據(jù)庫中讀取數(shù)據(jù)的,只能是jQuery將需要查詢或者想要讀取的數(shù)據(jù)通過ajax等發(fā)送給后臺編程語言php、Java等,由后臺語言讀取數(shù)據(jù)庫后返回jQuery。
工具原料:編輯器
1、使用jQuery發(fā)送需要查詢的數(shù)據(jù)給后臺,然后獲取后臺返回的數(shù)據(jù),簡單的代碼如下:
script?type="text/javascript"
$.ajax({
type:"post",
url:"test.php",//發(fā)送的后臺地址
data:{'name':'tom'},
success:function(data){
//此處處理后臺返回的數(shù)據(jù)
}
});
/script
2、一般是將后臺的數(shù)據(jù)在按照需求現(xiàn)實在頁面上。
var ajaxurl = path + "\/json/a.json";
url:ajaxurl,
他這里是把json格式的數(shù)據(jù)保存在一個頁面了,實際應(yīng)用中你不需要這種的,就是傳個url+參數(shù),去后臺讀取數(shù)據(jù)庫,然后返回一個數(shù)組,前臺顯示。 不要照搬別人的方法,$.post
$.ajax這里的方法你百度一下,看看使用方法就能看懂
提供你2中思路,具體代碼就不寫了
生成表的時候給修改鏈接一個id,id保存當前行的主鍵比如id="tid"+主鍵,為它添加onclick方法,
var id=this.id.replace("tid",""); 獲取到主鍵
把主鍵拿到數(shù)據(jù)庫中查到相應(yīng)的數(shù)據(jù)行,賦值給表單,完成!
var parents=$(this).parent().parent(); 獲得tabel行
$(parents).find("td").each(function(){
根據(jù)列的順序賦值給相應(yīng)的表單元素
})
這個方法有局限性,數(shù)據(jù)是從當前頁面中取得并不是實時讀取數(shù)據(jù)庫,如果數(shù)據(jù)在他處有更改是取不到最新的數(shù)據(jù)的。