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

 更新时间:2018年08月08日 15:29:56   作者:我本狂儒  
今天小编就为大家分享一篇ajax动态获取数据库中的数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

今天看到有人在问答上问怎样去动态取值附在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动态获取数据库中的数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于Spring Boot利用 ajax实现上传图片功能

    基于Spring Boot利用 ajax实现上传图片功能

    这篇文章主要介绍了Spring Boot利用 ajax实现上传图片功能,本文图文实例相结合,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决

    使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决

    这篇文章主要介绍了使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决的相关资料,需要的朋友可以参考下
    2015-10-10
  • 自己动手封装的 ajax

    自己动手封装的 ajax

    过完年后项目开发比较紧张,好长时间没写文章了。好在项目进入测试实施后期,可以有时间总结一些自己最近项目的心得了。自从提出WEB2.0富客户以后AJAX技术现在是越来越流行,有待代替CS桌面程序之势。
    2009-07-07
  • js与jQuery实现的兼容多浏览器Ajax请求实例

    js与jQuery实现的兼容多浏览器Ajax请求实例

    这篇文章主要介绍了js与jQuery实现的兼容多浏览器Ajax请求,以实例形式分别讲述了采用纯js与jQuery实现的兼容多浏览器Ajax请求的方法,并对Ajax中出现的乱码问题进行了一定的分析,需要的朋友可以参考下
    2014-11-11
  • 5款Ajax 文件上传控件

    5款Ajax 文件上传控件

    如果你的网站含有文件上传功能,那可以使用本文介绍的5款Ajax文件上传控件,提升用户体验。要知道,上传文件总是个痛苦的过程,要消除不太现实,但至少如果你为减少用户的痛苦努力了,那用户也会喜欢你的网站的。
    2009-10-10
  • Ajax 实现网站劫持的检测方法

    Ajax 实现网站劫持的检测方法

    https可以彻底解决劫持的问题。但是一般虚拟主机都不支持 https,难道http只能任流氓们恶意劫持么?下面通过本文给大家介绍Ajax 实现网站劫持的检测方法,需要的朋友可以参考下
    2017-08-08
  • javascript ajax获取信息功能代码

    javascript ajax获取信息功能代码

    本文提供一个思路,通过客户端与服务端获取信息,具体什么意思大家自己琢磨,本文只提供Client端代码,Server端代码自己去写,什么语言均可以!
    2010-04-04
  • 如何成为AJAX高手

    如何成为AJAX高手

    这篇文章主要介绍了如何成为AJAX高手
    2007-01-01
  • Jquery版本导致Ajax不执行success回调函数

    Jquery版本导致Ajax不执行success回调函数

    这篇文章主要介绍了Jquery Ajax不执行success回调函数的原因及解决方法
    2014-04-04
  • Ajax实现模拟关键字智能匹配搜索效果

    Ajax实现模拟关键字智能匹配搜索效果

    这篇文章主要介绍了Ajax实现模拟关键字智能匹配搜索效果,当在搜索框输入内容时,根据关键字匹配,显示弹出层,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12

最新评论