java工程师js

工程师js"/>

java工程师js

$(励志做一名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);

}

})

}

用户名：

密码：