jquery的Ajax

叶一口

于 2017-06-30 10:48:46 发布

阅读量294

点赞数 1

本文链接：https://blog.csdn.net/yyw1417/article/details/73938344

版权

注意

1 对超链接采取ajax要对其取消默认方式

$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
$.getJSON(url,args,function(data){
/* $("#show").html(data); */
$("#show").text(data.bookName);
});
return false;
});

2 args参数采取json方式写 var args={"time";new Date()};

3 如果json字符串是从服务器返回的，则写字符串的时候必须将 ' 都写成 \"

在index.jsp中的<script ....></script>

中$(function(){

...(节点，事件)

var herf=.....;

var args=....;

（以上都类似）

接下来是以4种方式返回Ajax需要的对象data

1.当url的目标文件时Json的js文件，或者url请求的是servlet然后servlet返回的是json类型对象的时候

$.getJSON(url,args,function(data){

$("#bookname").text (data.bookname); //在id为bookname的地方呈现sevlet中json字符串中键为bookname对应的值。

})

2.若url的目标文件为HTML片段格式的，则

$.post(url,args,function(){

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

})

3.以load方式，直接加载html文件中的内容

$("#details").load(url,args);

4.以get/post方式加载json文件或xml文件

4.1

json文件

{
"person":{
"name":"Andy",
"website":"http://andy.com",
"email":"andy@clear.com"
}
}

index.jsp中

$("#details").empty().append("<h2><a href='malto:'+email>"+name+"</a></h2>").
append("<br/>"+website);
});
return false;
});
});
</script>
</head>
<body>
<a href="b.js"> to b</a>
<div id="details"></div>

</body>

4.2 xml形式

<?xml version="1.0" encoding="UTF-8"?>
<det>
<name>小A</name>
<email>3141@qq.com</email>
</det>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<script type="text/javascript" src="../query/jquery-1.7.2.js">
</script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
$.get(url,args,function(data){
var name=$(data).find("name").text();
var email=$(data).find("email").text();
$("#details").empty().append("<h2>"+name+"</h2><br/>").append("<h4>"+email+"</h4>");
});
return false;
});
});
</script>
</head>
<body>
<a href="c.xml">to c</a>
<div id="details"></div>
</body>
</html>

});

带servlet的栗子

toservlet.jsp：

validateServlet.java:

public class validateservlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//返回html片段1
List<String> username=Arrays.asList("aa","bb");
String name=request.getParameter("username");
String result=null;
if(username.contains(name))
{
result="<font color='red'>已使用</font>";
}
else{
result="<font color='green'>可以使用</font>";
}
response.getWriter().print(result);
response.setCharacterEncoding("GB2312");
response.setContentType("text/html; charset=GB2312");

//返回html片段2
String res=null;
String rs=request.getParameter("cs");

//准备响应的对象
res="<font color='yellow'>"+rs+"</font>";
response.setContentType("text/html;charset=UTF-8")

响应对象;
response.getWriter().print(res);

在web.xml中配置servlet

<servlet>
<servlet-name>validateservlet</servlet-name>
<servlet-class>com.servlet.validateservlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>validateservlet</servlet-name>
<url-pattern>/validateServlet</url-pattern>
</servlet-mapping>