jQuery对Ajax的支持

在上一文 Ajax学习教程 中,学习可Ajax的标准使用方法(1、创建XMLHttpRequest对象  2、向服务器发送Ajax请求  3、处理服务器响应),每个Ajax请求都需要严格遵顼这个步骤进行编写。Ajax的这种开发方式非常不变,但幸运的是,jQuery对Ajax进行了封装和简化,提供了更加易于便捷的方法供我们进行开发

/**
 * @Author: 落叶无痕
 * @Date: 2020/6/16 21:40
 */
public class Book {

    private String bookName;
    private double price;

    public String getBookName() {
        return bookName;
    }

    public void setBookName(String bookName) {
        this.bookName = bookName;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }
}

注意:JAVA对JSON的序列化和反序列化,需要引入JSON工具包(fastjson、jackson-databind)

@WebServlet("/content") //@WebServlet注解相当于web.xml文件
public class IndexServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        //获取前端提交参数
        String bookName = request.getParameter("bookName");

        List list = new ArrayList();
        Book book = new Book();
        if(bookName != null && bookName.equals("水浒传")){
            book.setBookName("水浒传");
            book.setPrice(69);
        }else if(bookName != null && bookName.equals("红楼梦")){
            book.setBookName("红楼梦");
            book.setPrice(99);
        }
        list.add(book);
        //将集合对象转成json字符串
        String jsonString = JSON.toJSONString(list);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(jsonString);
    }
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/jquery-3.4.1.min.js">script>
head>
<body>
    <div id="form-div">
        <input type="text" id="book-name" placeholder="请输入书名:">
        <input type="submit" class="form-btn" value="submit">
    div>
    <br>
    <div id="content">内容区div>

    <script type="text/javascript">
        $(function() {
            $(".form-btn").click(function () {
                var bookName = $("#book-name").val();
                /*$.ajax()方法通过HTTP请求加载远程数据,是jQuery底层的ajax实现 */
                $.ajax({
                    url: "/content",   //请求地址
                    type: "get",       //请求方式
                    data: "bookName=" + bookName,    //提交给服务器的请求数据
                    dataType: "json",  //服务器返回的数据格式
                    /*成功回调函数*/
                    success: function (json) {  //data是服务器返回的json字符串格式的响应数据
                        console.log(json);
                        for(var i = 0; i <json.length; i++){
                            $("#content").html("

" + json[i].bookName + ": " + json[i].price + "

"); } }, /*失败回调函数*/ error: function (xmlhttp, errorText) { console.log(xmlhttp); console.log(errorText); if(xmlhttp.status == "405"){ alert("无效请求方式"); }else if (xmlhttp.status == "404"){ alert("未找到URL资源"); }else if (xmlhttp.status == "500"){ alert("服务器内部错误:请联系管理员"); }else{ alert("有异常:请联系管理员"); } } }); }); }); script> body> html>

jQuery对Ajax的支持_第1张图片

你可能感兴趣的:(web)