接口是selectquery(List<String> providesValues),ajax测试接口传参怎么写
时间: 2023-06-02 15:02:04 浏览: 52
在ajax中传参可以使用以下方式:
```javascript
$.ajax({
url: "your_url",
method: "POST",
data: {
providesValues: ["value1", "value2", "value3"]
},
success: function(response){
// 处理响应
},
error: function(){
// 处理错误
}
});
```
其中,"your_url"是接口地址,"POST"是请求方法,"data"是传递的参数,"success"和"error"分别是请求成功和失败后的回调函数。在"data"中,"providesValues"是接口需要的参数名,数组["value1", "value2", "value3"]是具体的参数值。根据实际情况修改即可。
相关问题
<div class="col-sm-4"> <input type="text" class="form-control pull-left" name="username" autocomplete="off" id="search-input" required placeholder="请输入联络员"/> <ul class="autocomplete-results list-group"></ul> 随便输入的时候,下面有提示,点击可直接添加到输入框中,且可以添加几个。springboot+mybatisplus+bootstrap完整案例 代码实现
这段代码实现了一个包含输入框和自动完成功能的搜索框。下面是可能的实现代码,使用了Bootstrap作为前端框架,Spring Boot和MyBatis Plus作为后端框架。具体实现可能还需要其他的代码来支持自动完成的功能,以及将选择的结果添加到输入框中。
HTML代码:
```html
<div class="col-sm-4">
<input type="text" class="form-control pull-left" name="username" autocomplete="off" id="search-input" required placeholder="请输入联络员"/>
<ul class="autocomplete-results list-group"></ul>
</div>
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 绑定输入框的输入事件
$('#search-input').on('input', function() {
var query = $(this).val();
// 发送Ajax请求获取自动完成的结果
$.ajax({
url: '/autocomplete',
method: 'GET',
data: {
query: query
},
success: function(results) {
// 清空自动完成的结果
$('.autocomplete-results').empty();
// 将结果添加到下拉列表中
results.forEach(function(result) {
var li = $('<li class="list-group-item"></li>');
li.text(result);
$('.autocomplete-results').append(li);
});
}
});
});
// 绑定下拉列表的点击事件
$('.autocomplete-results').on('click', 'li', function() {
var selected = $(this).text();
// 将选择的结果添加到输入框中
$('#search-input').val(selected);
});
});
```
Java代码:
```java
@RestController
public class AutocompleteController {
@Autowired
private ContactService contactService;
@GetMapping("/autocomplete")
public List<String> autocomplete(@RequestParam String query) {
// 调用ContactService获取自动完成的结果
return contactService.autocomplete(query);
}
}
@Service
public class ContactService {
@Autowired
private ContactMapper contactMapper;
public List<String> autocomplete(String query) {
// 调用MyBatis Plus进行模糊查询
QueryWrapper<Contact> wrapper = new QueryWrapper<>();
wrapper.like("name", query);
List<Contact> contacts = contactMapper.selectList(wrapper);
// 将查询结果转换为字符串列表
List<String> results = new ArrayList<>();
contacts.forEach(contact -> results.add(contact.getName()));
return results;
}
}
```
这段代码实现了一个简单的自动完成功能,可以根据输入框中的内容查询数据库中的联系人,并将查询结果显示在下拉列表中。用户可以选择下拉列表中的结果,将选择的结果添加到输入框中。
jsp ajax三级联动,Spring MVC+JSP实现三级联动
实现三级联动的基本思路是通过Ajax技术实现异步请求后端数据,然后动态生成页面元素实现级联效果。下面是一个Spring MVC+JSP实现三级联动的示例代码:
1. 前端JSP页面
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 加载省份列表
$.ajax({
url: "${pageContext.request.contextPath}/province",
type: "GET",
success: function(data){
var provinceList = JSON.parse(data);
var html = "";
for(var i=0; i<provinceList.length; i++){
html += "<option value='"+provinceList[i].id+"'>"+provinceList[i].name+"</option>";
}
$("#province").html(html);
}
});
// 根据省份id加载城市列表
$("#province").change(function(){
var provinceId = $(this).val();
$.ajax({
url: "${pageContext.request.contextPath}/city/"+provinceId,
type: "GET",
success: function(data){
var cityList = JSON.parse(data);
var html = "";
for(var i=0; i<cityList.length; i++){
html += "<option value='"+cityList[i].id+"'>"+cityList[i].name+"</option>";
}
$("#city").html(html);
}
});
});
// 根据城市id加载区县列表
$("#city").change(function(){
var cityId = $(this).val();
$.ajax({
url: "${pageContext.request.contextPath}/district/"+cityId,
type: "GET",
success: function(data){
var districtList = JSON.parse(data);
var html = "";
for(var i=0; i<districtList.length; i++){
html += "<option value='"+districtList[i].id+"'>"+districtList[i].name+"</option>";
}
$("#district").html(html);
}
});
});
});
</script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
</body>
</html>
```
2. 后端Controller代码
```java
@Controller
public class RegionController {
@Autowired
private RegionService regionService;
@RequestMapping(value="/province", method=RequestMethod.GET)
@ResponseBody
public String getProvinceList(){
List<Province> provinceList = regionService.getProvinceList();
return JSON.toJSONString(provinceList);
}
@RequestMapping(value="/city/{provinceId}", method=RequestMethod.GET)
@ResponseBody
public String getCityList(@PathVariable("provinceId") String provinceId){
List<City> cityList = regionService.getCityList(provinceId);
return JSON.toJSONString(cityList);
}
@RequestMapping(value="/district/{cityId}", method=RequestMethod.GET)
@ResponseBody
public String getDistrictList(@PathVariable("cityId") String cityId){
List<District> districtList = regionService.getDistrictList(cityId);
return JSON.toJSONString(districtList);
}
}
```
3. Service层代码
```java
@Service
public class RegionServiceImpl implements RegionService {
@Autowired
private RegionDao regionDao;
@Override
public List<Province> getProvinceList() {
return regionDao.getProvinceList();
}
@Override
public List<City> getCityList(String provinceId) {
return regionDao.getCityList(provinceId);
}
@Override
public List<District> getDistrictList(String cityId) {
return regionDao.getDistrictList(cityId);
}
}
```
4. DAO层代码
```java
@Repository
public class RegionDaoImpl implements RegionDao {
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public List<Province> getProvinceList() {
String sql = "select province_id, province_name from tb_province";
List<Province> provinceList = jdbcTemplate.query(sql, new BeanPropertyRowMapper<Province>(Province.class));
return provinceList;
}
@Override
public List<City> getCityList(String provinceId) {
String sql = "select city_id, city_name from tb_city where province_id=?";
List<City> cityList = jdbcTemplate.query(sql, new Object[]{provinceId}, new BeanPropertyRowMapper<City>(City.class));
return cityList;
}
@Override
public List<District> getDistrictList(String cityId) {
String sql = "select district_id, district_name from tb_district where city_id=?";
List<District> districtList = jdbcTemplate.query(sql, new Object[]{cityId}, new BeanPropertyRowMapper<District>(District.class));
return districtList;
}
}
```
其中Province、City和District是数据实体类,包含id和name两个属性。以上代码只是一个简单示例,实际项目中需要根据具体需求进行修改和完善。