$(勵志做一名Java全干工程師)

前言：JS，JSP，JQ區別？

JSP:JavaServer pages，他是作用于后端的技術，基于java的語言，混合了html，動態的調用html語句，實現動態的效果

JS：Java script，是前端的腳本語言，是動態腳本語言，就像php一樣，ajax就是通過JS+xml實現的

JO：Java Query，是js的庫，里面含有大量的。也就是說ajax是通過JQ+xml實現的

JS面試題方面：

函數：閉包 ()()--->自己調用自己

Dom：document，操作文檔對象

id，name，tag

create，remove

Bom：操作Bom元素，瀏覽器對象模型，

Window，操作瀏覽器的事件

ES6：新特性，let

let，一般用于遍歷上，讓其所修飾的參數變成局部變量

var，在沒有let前，用var，它不區分范圍，全局變量

wackpace：打包方式

一，Ajax實現過程

既然是剛接觸必然先畫個圖熟悉一下

流程圖畫出來就基本掌握json的方法了

下面在說一遍流程：

1.用戶在輸入框輸入信息，通過失去焦點的方法，讓用戶的信息實時的自動提交

2.通過Ajax的方式(實現Ajax需調用JQ的庫)去獲得這個事件(Ajax.post() 與$.post()一樣)

3.$.post({

url:"${pageContext.request.context}/所要連接的Controller方法映射地址",

data:{"name":${"#username"}.val()}, name：對應的是controller中所映射的方法的參數，注意，username前必須加#，作用，鎖住用戶攜帶的參數，才能給controller層的方法傳參，

success:function(data){}? controller層的方法中通過特定業務需求的處理并放回了一個json給success，sucess也可在對此時的data再處理或直接返回給瀏覽器。

})

好！下面看2個小demo就懂了

1.從后端獲取一組json對線，并打印到前端

Title

$(function(){$("#btn").click(function(){

//console.log("111");

/*$.post(url,param[可以省略],success)

**/$.post("${pageContext.request.contextPath}/a2",function(data){//console.log(data);

var html="";/*let，es6新特性，讓它所修飾的i盡在當前模塊生效，局部變量

* 以前js是沒有區域約束，用var修飾的參數在哪里都會被調用

**/

for (let i = 0; i

html+="

"+

"

"+data[i].name+""+

"

"+data[i].age+""+

"

"+data[i].sex+""+

"

"}

$("#content").html(html);

});

});

});

姓名

年齡

性別

2.登錄驗證，且錯誤有提示(利用Ajax實現)

User:33422Date:2020/11/15Time:19:46To changethis template use File | Settings |File Templates.--%>

Title

functiona1(){

$.post({

url:"${pageContext.request.contextPath}/a3",

data:{"name":$("#name").val()},

success:function(data){if(data.toString()==='ok'){

$("#userInfo").css("color","green");

}else{

$("#userInfo").css("color","red");

}

$("#userInfo").html(data);

}

})

}functiona2(){

$.post({

url:"${pageContext.request.contextPath}/a3",

data:{"pwd":$("#pwd").val()},

success:function(data){if(data.toString()==='ok'){

$("#pwdInfo").css("color","green");

}else{

$("#pwdInfo").css("color","red");

}

$("#pwdInfo").html(data);

}

})

}

用戶名：

密碼：

總結

以上是生活随笔為你收集整理的java工程师js_Ajax，　　励志做一名Java全干工程师的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。