jQuery 之 异步发送请求

描述:前端发送查询所有的ajax 请求，后端需要做处理，处理完成后会得到List集合，然后以json的格式发送给前端页面，前端页面做解析，展示到页面
获取的值有type类下的属性 id and name
效果图：

1.前端

1.1 页面 下拉选 创建json

<select id="tid" name="tid" class="bg">
 <option value="">--请选择--</option>
 </select>

1.2 json进行处理的代码

方式一:
/* data  从后端传过来一个集合对象 : [{id: 1, name: "手机数码"},{id: 2, name: "电脑办公"}.....]
*/
jQuery(function($) {
    $.ajax({
        url: "type/findAll.json",
        type: "get",
        dataType: "json", // 相应数据类型
        success: function (data) {
            $(data).each(function () {
                // this表示当前循环的对象，{id: 1, name: "手机数码"}
             $("#tid").append("<option value='" + this.id + "'>" + this.name + "</option>")
            })
        }
    })
})

方式二：
   // jQuery为get和post请求提供了语法糖（效果一样，语法不同），可以让代码更加简洁
            // $.get(url, [data], [callback], [dataType]);
            // $.post(url, [data], [callback], [dataType]);
            $.get("type/findAll.json", function(data) {
                $(data).each(function () {
                    // this表示当前循环的对象，{id: 1, name: "手机数码"}
                 $("#tid").append("<option value='"+this.id+"'>"+this.name+"</option>")
                })
            }, "json");

2. 后端

2.1 controller.java

@Controller
@RequestMapping("/type")  
public class TypeController {
    @Autowired
    private ITypeService itypeService;
// -----------------------
    @RequestMapping("/findall.json")
    @ResponseBody
    public  List<Type> queryType(){
       return itypeService.findAll();
    }

}

2.2 TypeServiceImpl.java

@Service
public class TypeServiceImpl implements ITypeService {
    @Autowired
    ITypeMapper itypeMapper;
    @Override
    public List<Type> findAll() {
       return itypeMapper.findAll();
    }
}

2.3 ITypeMapper .java

public interface ITypeMapper {
    @Select("select * from  type")
    List<Type> findAll();
}