jQuery.ajax()的写法

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();

    }
}

jQuery.ajax

猜你喜欢