Ajax given Gson

1. ajax underlying operating methods:

 

Get the code request 

 

             Get request

  

 

2. Post request

 

 

 

      $ ( " #Chufa " ) .click (function () {
           var Val $ = ( " #search " );
           var value = val.val ();
          var xhr1;
          IF (the XMLHttpRequest) { 
           xhr1 =    new new the XMLHttpRequest (); 
           xhr1 .Open ( ' POST ' , ' of hello2 ' );
            / * set a request header * / 
             xhr1.setRequestHeader ( ' the 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 request code

 

3. Use the code 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>

 

Use the transfer set of Gson

 

 Reception to receive data

 

 

 $("#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")

    })

代码