jQuery.ajax()的写法
程序员文章站
2022-07-15 14:30:34
...
jQuery.ajax
在用jquery一定记得引用jquery类库jquery.ajax()：通过 HTTP 请求加载远程数据。
括号中必须要放的参数：
url:通过 HTTP 请求加载远程数据。
type:数据提交的方式，一般是post提交，get提交基本上不用。
dataType:预期服务器返回的数据类型。
常用的返回数据类型：
Text:返回纯文本字符串
script:返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了”cache”参数。”’注意：”’在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
不常用的返回数据类型：
xml:返回 XML 文档，可用 jQuery 处理。
html:返回纯文本 HTML 信息；包含的script标签会在插入dom时执行
jsonp:JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
success:请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。 Ajax 事件。
例如：
success:function(data){//data是从控制层返回的json格式数据
}在这里只介绍常用的和必须写的参数。
还有其他类型的数据类型如：
accepts
cache
beforeSend(XHR)
complete(XHR, TS)等等
现在就写一个案例：
//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>Ajax</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"BookAction.do",//请求的url
type:"post",//请求的数据提交方式
dataType:"text",//返回的数据类型
success:function(data){//请求成功
var bArray=eval("("+data+")");//将接收到的json字符串数据转换成对象
var s="<tr><td>书本名</td><td>作者</td><td>出版社</td><td>价格</td></tr>";
//遍历数据 $.each(bArray,function(index,element){
s+="<tr><td>"+element.book_name+"</td><td>"+element.book_author+"</td><td>"+element.publishing+"</td><td>"+element.book_price+"</td></tr>";
});
//将拼接的数据放到table表格中
$("#tables").html(s);
}
});
});
</script>
</head>
<body>
<table width="100%" border="1" id="tables"></table>
</body>
</html>我的action是继承了struts的框架，所用的jar包比较多，所以就用普通的action给大家看了
Action层：
package com.Student.Ajax.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.Student.Ajax.dao.BookDao;
import com.Student.Ajax.pojo.Book;
import com.fasterxml.jackson.databind.ObjectMapper;
@WebServlet(name = "BookAction", urlPatterns = "/BookAction.do")
public class BookAction extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = -7236448404336522186L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
Book book = new Book();
List<Book> booklist = new BookDao().getAllBook(book);//查询所有的书籍数据的dao方法
PrintWriter out = resp.getWriter();
ObjectMapper om = new ObjectMapper();
String str = om.writeValueAsString(booklist);
out.write(str);
out.flush();
out.close();
}
}