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="https://www.cnblogs.com/yin-jihu/p/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="https://www.cnblogs.com/yin-jihu/p/搜索" 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">
<[email protected]>
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="https://www.cnblogs.com/yin-jihu/p/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="https://www.cnblogs.com/yin-jihu/p/0">請選擇...</option>
</select>
</td>
<%-- <td><input type="button" id="btn" value="https://www.cnblogs.com/yin-jihu/p/load" /></td>--%>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="proCity">
<option value="https://www.cnblogs.com/yin-jihu/p/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.展示圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/443484.html
標籤：jQuery
上一篇：巧用 CSS 構建漸變彩色二維碼
下一篇：Ajax教程及案例