Ajax教程及案例

1.ajax函数语法

1.$.ajax()

案例

$.ajax({
    url:"queryProvince2.do",
    dataType:"json",
    success:function (data) {
        //删除旧的数据，把已经存在的数据清空
        $("#proProvince").empty();
        $.each(data,function (i,n) {
            //获取select这个dom对象
            $("#proProvince").append(""+n.name +"")
        })
    }
})

2. $.get()

实例

var param =$("#proProvince>option:selected").val();
$.get("queryCity.do",{param:param},function (res) {
    $("#proCity").empty();
    $.each(res,function (i,n) {
        $("#proCity").append(""+n.name +"")
    })

});

3. $.post()

4.总结

1.省查询案例

1.新建queryProvice.jsp

    
    
    



    

        
省份编号：
        

            
            
        
    
    

        
省份名称：
        

            
        
    
    

        
省份简称：
        

            
        
    
    

        
省份省会：
        

            
        
    

    

2.新建ProvinceController

package com.bjpowernode.controller;

@RestController
public class ProvinceController {
    @Autowired
    private ProvinceService provinceService;
    @RequestMapping("queryProvince1.do")
    public Province queryProvince(HttpServletRequest request) {
        String num = request.getParameter("proid");
             return provinceService.selectByPrimaryKey(Integer.valueOf(num));
    }

}

3.新建 ProvinceService ProvinceServiceImpl

Province selectByPrimaryKey(Integer id);

  @Override
    public Province selectByPrimaryKey(Integer id) {
        return provinceMapper.selectByPrimaryKey(id);
    }

4.新建 ProvinceMapper ProvinceMapper.xml

Province selectByPrimaryKey(Integer id);

 
    
    select 
    
    from province
    where id = #{id}
  

5.新建Province

package com.bjpowernode.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Province {
    private Integer id;

    /**
    * 省份名称
    */
    private String name;

    /**
    * 简称
    */
    private String jiancheng;

    private String shenghui;
}

6.展示效果

2.省事级联查询案例

1.新建toProviceJq.jsp

    
    
    



--%>
    

    

        
省份：
        

            
                请选择...
            
        
      
    

        
城市：
        

            
                请选择...
            
        
    

2.新建ProvinceController

package com.bjpowernode.controller;

import com.bjpowernode.domain.Province;
import com.bjpowernode.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;

@RestController
public class ProvinceController {
    @Autowired
    private ProvinceService provinceService;

    @RequestMapping("/queryProvince2.do")
    public List queryProvince() {
        List provinces=  provinceService.selectByPrimaryname();
        return  provinces;
    }

}

3.新建ProvinceService ProvinceServiceImpl

List selectByPrimaryname();

@Override
public List selectByPrimaryname() {
    return provinceMapper.selectByPrimaryname();
}

4.新建 ProvinceMapper ProvinceMapper.xml

List selectByPrimaryname();

  
  
 	  select
   		
   	   from province
   		 order by id
  

5.新建CityController

package com.bjpowernode.controller;

import com.bjpowernode.domain.City;
import com.bjpowernode.service.CityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

@RestController
public class CityController {
    @Autowired
    private CityService cityService;

    @RequestMapping("/queryCity.do")
    public List queryCity(HttpServletRequest request){
        String param = request.getParameter("param");
        List cities = cityService.selectCityId(Integer.valueOf(param));
        return cities;
    }
}

6.新建 CityService CityServiceImpl

 List selectCityId(Integer id);

  @Override
    public List selectCityId(Integer id) {

        return cityMapper.selectQueryById(id);
    }

7.新建 CityMapper CityMapper.xml

List selectQueryById(@Param("id") Integer id);

 

  select c.id,c.name from city c
  join province p on  c.provinceid=p.id
  where p.id=#{id}

8.新建city

@Data
@AllArgsConstructor
@NoArgsConstructor
public class City {
    private Integer id;

    private String name;

    private Integer provinceid;
}

9.新建Province

package com.bjpowernode.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Province {
    private Integer id;

    /**
    * 省份名称
    */
    private String name;

    /**
    * 简称
    */
    private String jiancheng;

    private String shenghui;
}

10.展示图：