Jquery+Ajax請(qǐng)求數(shù)據(jù)的使用方法

本篇內(nèi)容主要講解“Jquery+Ajax請(qǐng)求數(shù)據(jù)的使用方法”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Jquery+Ajax請(qǐng)求數(shù)據(jù)的使用方法”吧!

目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、祥符網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>
<div>圖書列表    <table border="1">
        <th>
            <td>id</td>
            <td>圖書名</td>
            <td>作者</td>
        </th>
        <tbody id="booklist"><!--<tr>                <td></td>                <td></td>                <td></td>            </tr>-->        </tbody>

    </table>
        <button onclick="reloadBooks()" value="getbook"/>
</div>
<script>
    $(function(){       alert("jquery ready")

    });function reloadBooks(){
        $.get("getBookList",
            {},function(data){debugger;alert("Data Loaded: " + data);let booklist = '';for (let i = 0; i < data.length; i++) {let book = data[i];booklist += '<tr>';booklist += '<td>'+book.id+'</td>';booklist += '<td>'+book.name+'</td>';booklist += '<td>'+book.author+'</td>';booklist += '</tr>';
                }//所有的書的列表                $("#booklist").html(booklist);
            });
    }
</script>
</body>
</html>
package com.example.springboot0506.controller;import com.baomidou.mybatisplus.core.metadata.IPage;import com.example.springboot0506.entity.Book;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;import java.util.ArrayList;import java.util.List;/** * @Auther: GongXl * @Date: 2021/4/27 09:55 * @Description: */@Controllerpublic class HelloController {/**     * @Author GongXl     * @Description 跳轉(zhuǎn)公共視圖     * @Date 2021/4/30 10:28     * @Param [path]     * @return java.lang.String     **/    @RequestMapping("/{path}")public String commonPath(@PathVariable(value = "path") String path) {return path;
    }/**     * @Author GongXl     * @Description 獲得圖書json數(shù)據(jù)     * @Date 2021/5/6 15:27     * @Param []     * @return java.util.List<com.example.springboot0506.entity.Book>     **/    @RequestMapping("/getBookList")@ResponseBody    public List<Book> getBookList(){List<Book> booklist = new ArrayList<>();Book book = new Book();book.setId(1);book.setName("編程思想");book.setAuthor("jams");booklist.add(book);booklist.add(book);return  booklist;
    }

}

到此,相信大家對(duì)“Jquery+Ajax請(qǐng)求數(shù)據(jù)的使用方法”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!

文章標(biāo)題:Jquery+Ajax請(qǐng)求數(shù)據(jù)的使用方法
鏈接地址:http://muchs.cn/article10/jejego.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站制作面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司全網(wǎng)營(yíng)銷推廣

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化