17_7_26 ajax和servlet的交互,顺便js,jquery,ajax,jason,javabean和el表达式+ jstl表达式

这里写的很详细

总结:

1.js对象:var a=documnet.getElementById("123"),对应的操作:a.innerHTML+="sss";
2.jq对象: var $a=$(a);
详细参考

一:
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg");
这里的 $("#img")就是 jQuery 对象。
DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById("img").src = “test.jpg";
这里的document.getElementById("img") 就是DOM 对象。

$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的,是正确的,
但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。

jquery代码参考

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="/jquery/jquery.js"></script> 
</head> 

<body> 
<ul> 
<li>list item 1</li> 
<li>list item 2</li> 
<li class="third-item">list item 3</li> 
<li>list item 4</li> 
<li>list item 5</li> 
</ul> 

<script> 
$('li.third-item').next().css('background-color', 'red');       //必须掌握的语法
</script> 

</body> 
</html> 

这个例子的结果是,只有list item 4背景色变为红色

二:
再说一个例子,就是this, 在写 jQuery 时经常这样写: this.attr("src","test.jpg");可是就是出错,其实this 是DOM对象,而.attr("src","test.jpg") 是 jQuery 方法,所以出错了。
要解决这个问题就要将 DOM对象转换成 jQuery 对象,
例如 $(this).attr("src","test.jpg");

3.ajax 是一种特殊的 jqery;格式

$.ajax(                             //参数
{                                      //jason对象:{a:b,c:d,e:{}} 格式   需要引入jason的jar包

}
)

4.el表达式:jsp中:
javabean,el如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>                // 一:isELIgnored="false"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<p >你好,亲爱的:</p>${U.getUsername() }                 //二:传统javabean:<%= (User)request.getAtrribute("U").getUsername()%>
<p >欢迎登录!</p>
</body>
</html>

jq,ajax,jason,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 源生:js -->
<script type="text/javascript" >
	
</script>
<!-- js:之后的jQuery -->
<script  src="https://code.jquery.com/jquery-3.1.1.min.js"></script>     //jquery需要引入jar包,或者可以用百度链接
<script type="application/javascript">
 function appeard(){	
	
 	$.ajax(
 			{
		url:"sss",
	
		success:function(response){
			alert(response);
		},
		error:function(){
			alert("下载失败");
		}
	} 
 			)
	
}

 function appear(){
	$.ajax({
		url:"sss",
		success:function(response){
			alert("即将显示");
			$("img").attr("src","./images/a.jpg");     //jq格式
		},
		error:function(){
			alert("显示失败");
		}
		
	}
			)
	
} 
	
</script>


</head>
<body>
	<button onclick="appeard()">
	请点击下载图片
	</button>
	<button onclick="appear()">
	请点击显示
	</button>		
	<div></div>	
	<img  >
</body>
</html>

jstl

1.导包---jstl
2.引入
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  

<body>
<c:if test="{user}">sss</c:if>
</body>

e.g:
<td>
<input type="radio" name="ugender" value="男" <c:if test="${user.ugender=='男' }">checked="checked"</c:if>/>男
<input type="radio" name="ugender" value="女" <c:if test="${user.ugender=='女' }">checked="checked"</c:if>/>女


原文地址:https://www.cnblogs.com/du1991/p/7239611.html