Ajax與Gson

1. ajax的底層操做方法：

代碼get請求 

             Get請求

  

2. Post請求

  

      $("#chufa").click(function () {
          var val  = $("#search");
          var value = val.val();
         var xhr1 ;
         if (XMLHttpRequest){
           xhr1 =   new XMLHttpRequest();
           xhr1.open('post','hello2');
           /*設置一個請求頭*/
             xhr1.setRequestHeader('Content-type','application/x-www-form-urlencoded');
           xhr1.send('name='+value);
           xhr1.onreadystatechange  =function () {
               if (xhr1.status == 200 && xhr1.readyState ==4){
                   var txt = xhr1.responseText;
                   $("#mytable").css("display","")
               }


           }
         }
      });

post請求代碼

3. 使用Gson 代碼

      Gson 代碼的依賴  
  <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>

 

使用Gson 傳送集合

 

 前臺接收數據

 $("#tijiao").click(function () {

        var xhr ;
        if (XMLHttpRequest){
            xhr = new XMLHttpRequest();

            xhr.open("post","hello2");
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xhr.send('name=zhangsan');
            //響應結果
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState ==4){
                    var txt = xhr.responseText;
                   var obj1 =  JSON.parse(txt);
                    for (var i=0; i<obj1.length;i++) {
                       var x = console.log(obj1[i]);
                       var id = obj1[i].id;
                        var name = obj1[i].name
                        var category = obj1[i].category
                        $("#mytd").append($('<tr>'+
                            '<td>'+id+'</td>'+
                            '<td>'+name+'</td>'+
                            '<td>'+category+'</td>'+
                            '</tr>'));
                    }   }

                }
            }

  })
    //    $("#mytd")

    })

代碼

 Gson 日期類型  和 ajax的簡化寫法

get 方式的寫法

 

1. $.get(…): 發送異步的get請求。
        $.get(url,data,function(){ … },’json’);

 

 

 

 

 post  方法的簡化寫法

2. $.post(…)：發送異步的post請求。
        $.post(url,data,function(){ … },’json’);

 

 

 

 第三種方法

3. $.ajax(…); 
        $.ajax({
            url: 請求路徑,
            method: get|post,
            data: 請求參數,
            success:function(data){ // data 是響應的數據
                // 響應成功的回調函數
},
error:function(){
    // 出現錯誤執行的函數
},
dataType:’json’// 自動將響應的json字符串轉換成js對象
});

      也能完成ajax的請求

 

 

 

 

 

ajax  傳輸數據

 $(function () {
            $('#btn').click(function () {
                var ids = [1, 3, 4, 5, 6]; //ids=1&ids=2&ids=3
                $.ajax({
                    url:'/ajax_day2/p/ajaxParam',
                    method:'get',
//                    data:'name=小寶',
                    data:{
                        ids:ids
                    },
                    traditional:true,// 是否使用傳統的方式序列化傳遞數據
                    success:function (data) {// data是響應結果
                        console.log(data);
                    },
                    error:function () {
                        alert('親~出錯了！~');
                    },
                    //dataType:'json'// 將響應的json字符串轉換成js對象

                });
            });

        });

 

ajax  更換圖片的操做

 <script type="text/javascript">
        $(function () {
            $('#saleImg').click(function () {
                // 更換圖片
                $(this).attr('src', 'img/load.gif');

                var img = $(this);
                // 獲取當前商品的id
                var id = $(this).attr('title');
                console.log(id);
                var xhr;
                if(window.ActiveXObject) {
                    xhr = new ActiveXObject('Microsoft.xmlhttp');
                }else {
                    xhr = new XMLHttpRequest();
                }
                xhr.open('get', '/ajax_day2/cart/addCart?id='+id);
                xhr.send();
                xhr.onreadystatechange = function () {

                    if(xhr.status==200 && xhr.readyState==4) {
                        // 獲取響應內容
                        var txt = xhr.responseText;
                        console.log(txt);
                        img.attr('src','img/right.gif');
                        setTimeout(function () {
                            img.attr('src','img/booksale.gif');
                        }, 1000);
                    }
                };
            });
        })

    </script>

基於ajax的 三級聯動

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 初始化省下拉列表
            $.get('/ajax_day2/p/findCity',function (data) {
                //console.log(data);
                for(var i=0;i<data.length;i++) {
                    $('#province').append($('<option value="'+data[i].id+'">'+data[i].name+'</option>'));
                }
                // 手動觸發change事件
                $('#province').change();
            },'json');

            // 初始化市
            $('#province').change(function () {
                // 清空歷史記錄
                $('#city').empty();
                $.get('/ajax_day2/p/findCity','parentId='+$(this).val(),function (data) {
                    for(var i=0;i<data.length;i++) {
                        $('#city').append($('<option value="'+data[i].id+'">'+data[i].name+'</option>'));
                    }
                    // 手動觸發change事件
                    $('#city').change();
                },'json');

            });

            // 初始化縣
            $('#city').change(function () {
                // 清空歷史記錄
                $('#country').empty();
                $.get('/ajax_day2/p/findCity','parentId='+$(this).val(),function (data) {
                    for(var i=0;i<data.length;i++) {
                        $('#country').append($('<option value="'+data[i].id+'">'+data[i].name+'</option>'));
                    }
                },'json');
            })

        });
    </script>
</head>
<body>
省：<select id="province"></select>
市：<select id="city"></select>
縣（區）：<select id="country"></select>
</body>
</html>

 

 

 

ajax 定義聊天框 

 <script type="text/javascript">
        var data = ['corejava', 'oracle', 'jdbc', 'html', 'css', 'servlet', 'jsp', 'struts2',
            'mybatis', 'javascript', 'jquery', 'maven'];

        // 文檔加載完畢執行
        $(function () {
            $('#inpu').keyup(function () {
                // 清除歷史記錄
                $('#tb').empty();

                // 獲取到輸入的內容
                var inpuVal = $(this).val();

                var flag = 0;
                if (inpuVal != null) {
                    // 發送ajax請求
                    var xhr;
                    if (window.ActiveXObject) {
                        xhr = new ActiveXObject('Microsoft.xmlhttp');
                    } else {
                        xhr = new XMLHttpRequest();
                    }
                    xhr.open('get', '/ajax_day2/cart/searchCity?name=' + inpuVal);
                    xhr.send();
                    xhr.onreadystatechange = function () {
                        if (xhr.status == 200 && xhr.readyState == 4) {
                            var txt = xhr.responseText;
                            console.log('txtleng:' + txt.trim().length);
                            var cityArr = txt.split(':');
                            if (txt.trim().length > 0) {
                                flag++;
                                for (var i = 0; i < cityArr.length; i++) {
                                    $('#tb').append($('<tr><td>' + cityArr[i] + '</td></tr>'))
                                }
                            }
                        }
                        if (flag > 0) {
                            // 展現div
                            $('#dv').slideDown(300);// 向下劃出 參數是時間/毫秒
                        } else {
                            $('#dv').hide();// 隱藏元素
                        }
                    }


                }
            });
        });