工程师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.--%>
Titlefunctiona1(){
$.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
发布评论