ajax动态获取数据库中的数据方法

  • Z时代
  • 2024-01-10
  • 分类：综合

今天看到有人在问答上问怎样去动态取值附在option上，本来想解决的，但我发现。。。。没有，我本来也笨，记不住，所以还是写一下，让大家可以看一下：

首先我这用的框架是SSM，代码就开始了：

这是写在前台的方法里一个点击事件进入方法里我就不写那么麻烦了直接ajax部分代码：

$.ajax({//这就开始进入ajax了
type:"get",//这个我也忘了，好像是类似格式吧，基本是死的不需要改动
dataType:"json",//这个是将字符串转换成json格式
cache:false,//不晓得
data:"staffName="+staffName+"&staffGender="+staffGender,//这两个就是我要向后台传的值，之前已经拿到了，staffName和Gender就是对象的属性名，也可以随意起
url:"<%=request.getContextPath()%>/staffGet", //这个是路径，staffGet是我在视图层声明的名字我想你们应该知道mapping吧
complete:function(msg){ //如果你们仅仅只是向后台传值就不需要下面的代码了，如果有返回值，比如name查找数据库所有相同name并在前台接收就需要下面的代码
$("#read").html(""); //在这里是因为我点击一次就自动把查到的信息添加，会重复，所以才有的在赋值之前把原本的信息删除，请参考这串代码倒数第二行你就懂了
$("[id=read]").remove();//这是把原本的ID删除只有这样才能清空原本的信息，ID存在会显示一个空的td,这一行和上一行与该文章没有关系，只是项目需要，可以没有
var data = eval("(" + msg.responseText + ")"); //这就是将后台传过来的数据并交给data这个对象
$.each(data["list"],function(i,item){//遍历这个数据，我在后台发送数据给的KEY是list,所以才有data["list"]，变量名随你传送的map的KEY变化而变化详情请看后台代码
 var Name="<tr id='"+item.staffId+"tr'><td id='"+item.staffId+"Name'>"+item.staffName+"</td>"； //这里我用一个字符串向tr和td赋值，ID最后一行改了是为了绿色注解部分
$("#staffget").append(Name); //然后将字符串插入表格中，具体插入方式可以参考ajax的API，有appendTo等多种方式，按情况参考
$("#"+item.staffId+"tr").attr("id","read"); //在这里将所有tr的ID改成read,为了我点击多次从后台取值不会出现多次重复，点一次删除所有Id为read的

前台代码缺括号，有）}，具体缺哪个自行查找

现在开始后台代码，因为懒得找就随意找了一个

@RequestMapping("/JurisdictionGet") //这里就是我在之前ajax里url的路径，详情请看ajax--url我有解释
@ResponseBody //这是因为使用了ajax必须要声明的注解
public Object JurisdictionGet(Jurisdiction jurisdiction) throws Exception //因为使用了ajax所以方法必须使用Object类型的方法，参数列表就是前台发送回来的 数据，如果想在后台用对象接收，前台传值时，定义的参数名必须是你这个对象的属性名，才可以像我这样接收，如果不同就用String接收，但参数名必须和前台定义的一样
 {
Map<String, Object> map = new HashMap<String, Object>(); //这个map是在前台需要有返回值时存在的，获取数据库的值通过它传给前台用key取值
map.put("list", JurisdictionServices.JurisdictionGet(jurisdiction)); //定义的KEY为list,value里的数据是我调用的Services层，主要逻辑都写在哪里，就不发了，和以前大家的用法都差不多，因为是查多个，所以返回的是LIST数据，懂吧？不懂 可以在评论问我，我回复大家
return map;//将这个map发送出去，再往后的参考前台就行，解释的很清楚了，不懂的可以问我，我只要会，就一定解 答大家
 }

以上这篇ajax动态获取数据库中的数据方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

以上是 ajax动态获取数据库中的数据方法 的全部内容， 来源链接： utcz.com/z/360523.html

回到顶部