AJAX提交的一个例子

前端与后端交互示例

最新推荐文章于 2021-08-05 16:13:23 发布

最新推荐文章于 2021-08-05 16:13:23 发布 · 135 阅读

文章标签：

#AJAX 提交

@Ajax 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个简单的前端与后端交互的例子，通过Ajax发送GET请求获取后端数据，并将这些数据显示在前端页面上。具体包括jQuery的Ajax调用方式、数据处理逻辑及后端Controller的实现。

前端

$(document).ready(  
    function() {  
      $.ajax( {  
     async:false,
        type : 'GET',
        data:{},
        contentType : 'application/json;charset=UTF-8',  
        url : 'testAjax',
        dataType : 'json', 
        success : function(data) { 
          if (true) {  
           alert(data);
           var String_option="";
            $('#info').html("共" + data[0].id + "条数据。<br/>");  
            $.each(data, function(i, item) { 
             String_option=String_option+"<option value="+item.a+">"+item.b+"</option>";
            $('#info').append(  
                  "A属性：" + item.a + "，B属性：" + item.b+"<br/>");  
            }); 
            //alert(String_option);
            $("#selectId").html(String_option);
          }  
        },  
        error : function() {  
          alert("error")  
        }  
      });  
    });

后台

@RequestMapping(value = "testAjax",method = RequestMethod.GET)
@ResponseBody
public String testAjax(){
List<Test> list=testService.getAllTest();   
   /* Map<String, Object> modelMap = new HashMap<String, Object>(3);  
    modelMap.put("total", "1");  
    modelMap.put("data", list);  
    modelMap.put("success", true); */ 
    
    return JSONUtil.toJSONString(list);
}