AJAX配合json和 jquery使用

最新推荐文章于 2021-09-15 16:19:04 发布

罗密欧与猪一夜

最新推荐文章于 2021-09-15 16:19:04 发布

阅读量419

点赞数

文章标签： ajax jquery json

本文链接：https://blog.csdn.net/jerry_wzj_/article/details/107441273

版权

AJAX配合json和 jquery使用

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

它的传统用法比较复杂，配合json和jquery使用会简单很多

格式：（需导入jquery文件，并放入js函数中使用）

$.ajax({    
url:请求地址    
type:"get | post | put | delete " 默认是get,   
data:请求参数 {"id":"123","pwd":"123456"},    
dataType:请求数据类型"html | text | json | xml | script | json ",   
 success:function(data,dataTextStatus,jqxhr){ },//请求成功时                    
  error:function(jqxhr,textStatus,error)//请求失败时 })

dataTpye常用json类型

JSON：数据交换语言

json对象的用法:

<script type="text/javascript">
 
        // json的定义         
 
        var jsons = {
 
                "key1":"abc", // 字符串类型
 
                "key2":1234,  // Number
 
                "key3":[1234,"21341","53"], // 数组
 
                "key4":{                    // json类型
 
                    "key4_1" : 12,
 
                    "key4_2" : "kkk"
 
                },
 
                "key5":[{                  // json数组
 
                    "key5_1_1" : 12,
 
                    "key5_1_2" : "abc"
 
                },{
 
                    "key5_2_1" : 41,
                    "key5_2_2" : "bbj"
 
                }]
 
        };
 
        // 访问json对象的属性        
        alert(jsons.key1); // "abc"        
        // 访问json的数组属性        
        alert(jsons.key3[1]); // "21341"        
        // 访问json的json属性        
        alert(jsons.key4.key4_1);//12        
        // 访问json的json数组        
        alert(jsons.key5[0].key5_1_2);//"abc"   
  </script>

json最常用法：

在Javaweb中把要传到前端的数据转换成json对象，然后通过servlet响应方法传到前端页面，最后在前端js代码中访问得到的json对象的数据

json在java中的转换

（需要到如对应的jar包）

《1》单个对象的转换

java->json:

Users user2=new Users(); 
user2.setUsername("李四"); 
user2.setPassword("abc");
user2.setAge(20); 
JSONObject obj=JSONObject.fromObject(user);//obj就是json格式的

json->java:

String str="{'username':'李四','password':'admin','age':19}"; 
JSONObject json=JSONObject.fromObject(str); 
Users user=(Users)JSONObject.toBean(json,Users.class);

《2》对象集合和json数组的转换

java集合->json数组：

List list=new ArrayList();
list.add("dd"); 
list.add("aa"); 
JSONArray obj=JSONArray.fromObject(list);//set也是这么转

json数组->java集合：

方式1：

String str2="[{'age':20,'password':'abc','username':'李四'}, 
{'age':10,'password':'adb','username':'张三'}]"; 
JSONArray json2=JSONArray.fromObject(str2); Object[]； 
obj=(Object[])JSONArray.toArray(json2,Users.class);

方式2：

String str3="[{'age':20,'password':'abc','username':'李四'}, 
{'age':10,'password':'adb','username':'展示干'}]";
 
JSONArray json3=JSONArray.fromObject(str3);
//默认转换成ArrayList
 List<Users> list=(List<Users>) 
 JSONArray.toCollection(json3,Users.class);

ajax实例：实现数据的自动填充

前端页面：

 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>   
 <script>      
    $(function(){          
       $("[name='uid']").blur(function(){               
            var uid=$(this).val();               
            $.ajax({                   
                 url:"getuser",                   
                 data:"userid="+uid,                   
                 type:"post",                   
                 dataType:"JSON",//设置服务器端响应回来的格式                   
                 success:function(rs){                       
                     //alert(rs.username);                       
                    $("[name='uname']").val(rs.username);                      
                    $("[name='address']").val(rs.address);                       
                    if(rs.sex=='男'){                         
                        $("#boy")[0].checked=true;                       
                    }else{                          
                        $("#girl")[0].checked=true;                      
                    }                 
                }
 
            });
        });

    })
 
 </script> 
 <body> 
   userid:<input type="text" name="uid"><br> 
   username <input type="text" id="uname" name="uname"><br> 
   address <input type="text" id="address" name="address"><br> 
   sex:<input type="radio" name="sex" id="boy">男 
   <input type="radio" name="sex" id="girl">女 
 </body>

后台：

实体类：

public class Users {   
    private String username;    
    private String password;    
    private String address;    
    private String sex; }

servlet处理类：

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
           ServletException, IOException {  
    
    String userid=req.getParameter("userid");//获得前端传来的参数，即ajax的data传入的数据
    Users users=new Users();    
    switch (Integer.parseInt(userid)){        
        case 1:            
            users.setUsername("张安");            
            users.setAddress("北京");            
            users.setSex("男");            
            break;        
        case 2:           
            users.setUsername("张安1");            
            users.setAddress("北京2");           
            users.setSex("女");            
            break;       
        case 3:           
            users.setUsername("张安3");            
            users.setAddress("北京3");           
            users.setSex("男");           
            break;        
        default:            
            users.setUsername("");            
            users.setAddress("");            
            users.setSex("");   
    }    
    //将users对象响应给客户端，使用PrintWriter来实现
    resp.setContentType("text/html;charset=utf-8");   
    PrintWriter writer = resp.getWriter();
 
    //将对象转换成json格式    
    JSONObject jsonObject = JSONObject.fromObject(users);   
    writer.print(jsonObject);
 
 
}

罗密欧与猪一夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX配合json和 jquery使用

AJAX配合json和 jquery使用AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下它的传统用法比较复杂，配合json和jquery使用会简单很多格式：（需导入jquery文件，并放入js函数中使用）$.ajax({ url:请求地址 type:"get | post | put | delete " 默认是get, data:请求参数 {"id":"123","pwd":"123456"}, dataType:请求数据类型"html
复制链接

扫一扫