JavaScript使得能够在前端中添加java代码
JQuery是JS的一个框架,创建一个mian.js文件,在里面编写js代码
并且在main.html的标签中添加
<script type="text/javascript" src="main.js"></script>
将该js应用到main.html中。
入口函数
$(function(){
//js代码
});
获取文本框的值
var value=$("input#id").val();
为文本框赋值
var value=$("input#id").val("赋值");
为标签添加文本
$("p#id").html("内容");
获取后台返回的json数据
var host="http://localhost:8080/";
$.getJSON(host+"customerservice/accesscard/get",{cardno:cardnpo},function(as){
$("input#cardnoSee").val(as.cardno);
if(password.equals(as.password)...
});
//"customerservice/accesscard/get":controller层中json数据路径
//cardno:cardnpo:cardno为表的一个字段,cardnpo为js文件的一个变量
//as:返回的数据存储到这个变量中
//这个语句的意思:查询目标表中字段cardno的值为cardnpo的数据,并且将返回的json数据存储到变量as中
获取字符串长度
userid.length
判断字符串是否相等,如果字符串类型不相等,他还会自动转换类型
var A="156516516";
var B="5165161665";
if(A==B);//
页面跳转
单页面web应用,A页面中嵌套了B页面
//连同A页面弃用,整个页面实现跳转,B的js有
window.location.href='b.html';
//只跳转B页面,保留A页面,那B页面的js有
self.location.href='b.html'
在HTML中插入html语句
//原语句: <div id="divjs"></div>
$("div#divjs").append("<p>添加的内容</p>");
//修改后: <div id="divjs"> <p>添加的内容</p> </div>
为html添加表格
//模拟json数据
var tablehead=["用户ID","用户名字"];
//表头输出
for(var i=0;i<tablehead.length;i++){
$("table#usertable").append("<th>"+tablehead[i]+"</th>");
}
//成员行输出
$.getJSON(host+"User/get/listall",function(us){
for(var i=0;i<us.length;i++){
$("table#usertable").append(
"<tr>"+
"<td>"+us[i].userid+"</td>" +
"<td>"+us[i].username+"</td>" +
"</tr>");
}
});
获取鼠标选中行的数据
$("table tr").on("click",function() {
var td = $(this).find("td");// 找到td元素
var id = td[0].innerHTML;// 指定需要获取元素的下标即可,这样获取到选中行的第一列
alter(id);
});
但上面的方法不能为jQuery动态append元素增加点击事件,若想改为可以为动态append元素增加点击事件,如下
$("table#usertable").on("click","tr",function() {
var td = $(this).find("td");// 找到td元素
var id = td[0].innerHTML;// 指定需要获取元素的下标即可
alter(id);
});
执行简单的POST请求(这里有一个问题,如果post返回的不是json数据[默认],那回调函数function是不会执行的)
$.post( url, [data], function(){
//回调函数
}, [type] ) //使用POST方式来进行异步请求
删除html表格
//选中行
var td;
$("table#usertable").on("click","tr",function() {
td = $(this).find("td");// 找到td元素
});
//删除行
$("button#delete").on("click",function(){
//再从html中直接把那一行删掉
td.remove();
$("p#operation").html("删除成功!");
});
html中<input>标签读取的都是string