- A+
所属分类：Web前端
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("<option value='"+n.id +"'>"+n.name +"</option>") }) } }) 2. $.get()
实例
var param =$("#proProvince>option:selected").val(); $.get("queryCity.do",{param:param},function (res) { $("#proCity").empty(); $.each(res,function (i,n) { $("#proCity").append("<option value='"+n.id +"'>"+n.name +"</option>") }) }); 3. $.post()
4.总结
1.省查询案例
1.新建queryProvice.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function () { $("#btn").on("click",function () { //获取dom的value值 var proid = $("#proid").val(); $.ajax({ url:"queryProvince1.do", data:{ proid:proid }, dataType:"json", success:function (rs) { //alert(rs.name); $("#proname").val(rs.name); $("#projiancheng").val(rs.jiancheng); $("#proshenghui").val(rs.shenghui); } }) }) }) </script> </head> <body> <table style="border: 1px solid red" align="center"> <tr> <td>省份编号：</td> <td> <input type="text" id="proid" /> <input type="button" value="搜索" id="btn" /> </td> </tr> <tr> <td>省份名称：</td> <td> <input type="text" id="proname" /> </td> </tr> <tr> <td>省份简称：</td> <td> <input type="text" id="projiancheng" /> </td> </tr> <tr> <td>省份省会：</td> <td> <input type="text" id="proshenghui" /> </td> </tr> </thead> </table> </body> </html> 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 id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap"> <!--@mbg.generated--> select <include refid="Base_Column_List" /> from province where id = #{id} </select> 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
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>省级联查</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function () { loadProvince(); loadCity(); /* $("#btn").click(function () { loadProvince(); })*/ //给省份的select绑定一个change事件，当select内容发生变化时，触发该事件 $("#proProvince").change(function () { var obj =$("#proProvince>option:selected"); var param = obj.val(); //alert(param); $.get("queryCity.do",{param:param},function (res) { $("#proCity").empty(); $.each(res,function (i,n) { $("#proCity").append("<option value='"+n.id +"'>"+n.name +"</option>") }) }); /* $.ajax({ url: "queryCity.do", data:{ param:param }, success:function (res) { $("#proCity").empty(); $.each(res,function (i,n) { $("#proCity").append("<option value='"+n.id +"'>"+n.name +"</option>"); }) } })*/ }) /* function roolback(rse) { alert(res.name); $.each(res,function (i,n) { $("#proCity").append("<option value='"+n.id +"'>"+n.name +"</option>") })*/ }) //加载第一个省份时，加载第一份省份的市 function loadCity() { $.ajax({ url: "queryCity.do", data:{ param:1 }, success:function (res) { $("#proCity").empty(); //清空select列表 $.each(res,function (i,n) { $("#proCity").append("<option value='"+n.id +"'>"+n.name +"</option>"); }) } }) } function loadProvince() { $.ajax({ url:"queryProvince2.do", dataType:"json", success:function (data) { //删除旧的数据，把已经存在的数据清空 $("#proProvince").empty(); $.each(data,function (i,n) { //获取select这个dom对象 $("#proProvince").append("<option value='"+n.id +"'>"+n.name +"</option>") }) } }) } </script> </head> <body> <table border="1" align="center"> <tr> <td>省份：</td> <td> <select id="proProvince"> <option value="0">请选择...</option> </select> </td> <%-- <td><input type="button" id="btn" value="load" /></td>--%> </tr> <tr> <td>城市：</td> <td> <select id="proCity"> <option value="0">请选择...</option> </select> </td> </tr> </table> </body> </html> 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<Province> queryProvince() { List<Province> provinces= provinceService.selectByPrimaryname(); return provinces; } } 3.新建ProvinceService ProvinceServiceImpl
List<Province> selectByPrimaryname(); @Override public List<Province> selectByPrimaryname() { return provinceMapper.selectByPrimaryname(); } 4.新建 ProvinceMapper ProvinceMapper.xml
List<Province> selectByPrimaryname(); <!--查询省名字--> <select id="selectByPrimaryname" resultMap="BaseResultMap"> select <include refid="Base_Column_List" /> from province order by id </select> 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<City> queryCity(HttpServletRequest request){ String param = request.getParameter("param"); List<City> cities = cityService.selectCityId(Integer.valueOf(param)); return cities; } } 6.新建 CityService CityServiceImpl
List<City> selectCityId(Integer id); @Override public List<City> selectCityId(Integer id) { return cityMapper.selectQueryById(id); } 7.新建 CityMapper CityMapper.xml
List<City> selectQueryById(@Param("id") Integer id); <!--查询省对应的城市--> <select id="selectQueryById" resultMap="BaseResultMap"> select c.id,c.name from city c join province p on c.provinceid=p.id where p.id=#{id} </select> 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.展示图：
