AJAX与JSON数据交互处理

目录

1.使用bootstrap的话先导入JS文件

2.jQuery AJAX API

 2.1 代码如下：

 2.1.1代码如下：

 

3.fastjson （JSON序列化和反序化的框架）

3.1对象转换 --->将Student对象转换为JSON对象

4.Web2.0的特点：

5.为什么使用AJAX

6.传统Web与AJAX的差异

 7.AJAX工作流程

 8.XMLHttpRequest

 9.GET和POST请求的区别：

 10.使用JQuery实现Ajax

 11.ajax（）简介

 12认识JSON

---

前言：好好学习

---

 1.使用bootstrap的话先导入JS文件

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script type="text/javascript">

2.jQuery AJAX API

2.1 代码如下：

---

 2.1.1代码如下：

 <script type="text/javascript">
        $(function() {
                $.ajax({
                    type: "get",
                    url: "RegController?username=" + $("#username").val(),
                    success: function(data){
                        $("#loading").remove() ;
                        //$("#msg").html(msg);
                        alert(data.msg) ;
                    },
                    beforeSend: function() {
                        $("body").append($("<img>").attr({"src":"image/loading.gif","id":"loading"})) ;
                    }
                });
                $.get("AllProductController