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动态获取数据库中的数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 基于$.ajax()方法从服务器获取json数据的几种方式总结

    一.什么是json json是一种取代xml的数据结构,和xml相比,它更小巧但描述能力却很强,网络传输数据使用流量更少,速度更快. json就是一串字符串,使用下面的符号标注. {键值对} : json对象 [{},{},{}] :json数组 "" :双引号内是属性或值 : :冒号前为键,后为值(这个值可以是基本数据类型的值,也可以是数组或对象),所以 {"age": 18} 可以理解为是一个包含age为18的json对象,而[{"age":

  • AJAX和jQuery动态加载数据的实现方法

    什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON.简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容. 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服

  • 利用js将ajax获取到的后台数据动态加载至网页中的方法

    动态生成二级菜单树: <script> jQuery(function($) { /********** 获取未处理报警信息总数 **************/ var result; $.ajax({ async:false, cache:false, url: "alarm_findPageAlarm.do",//访问后台接口取数据 // dataType : "json", type: 'POST', success: function(data)

  • Ajax动态加载数据库示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • JS使用ajax从xml文件动态获取数据显示的方法

    本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过ajax检索xml文件的内容动态展示到网页,真个页面无刷新 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; var txt,x,xx,i; if (window.XMLHttpRequest) {// code for IE7+,

  • Ajax获取数据然后显示在页面的实现方法

    主要功能流程介绍 循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页 代码实现流程和解说 一.列表页 1.访问链接list.php时判断是pc端还是客户端 $user_agent_arr = mall_get_user_agent_arr(); if(MALL_UA_IS_PC == 1) { //****************** pc版 ****************** include_once './list-pc.php';

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

    今天看到有人在问答上问怎样去动态取值附在option上,本来想解决的,但我发现....没有,我本来也笨,记不住,所以还是写一下,让大家可以看一下: 首先我这用的框架是SSM,代码就开始了: 这是写在前台的方法里一个点击事件进入方法里我就不写那么麻烦了直接ajax部分代码: $.ajax({//这就开始进入ajax了 type:"get",//这个我也忘了,好像是类似格式吧,基本是死的不需要改动 dataType:"json",//这个是将字符串转换成json格式 c

  • 微信小程序云开发修改云数据库中的数据方法

    小程序代码中无法直接修改他人创建的数据记录 例如:数据库表中的_openid字段是自动生成的,哪个用户创建的记录这个openid就是用户的openid,云数据库的权限分配也是根据openid来进行的. 解决方案: 第一步:创建云函数,在函数中编写修改数据库的操作代码 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const _ = db.command // 云

  • php录入页面中动态从数据库中提取数据的实现

    摘要:用php制作动态web页面时,在提交服务器之前,让php根据用户在当前页面上录入的某字段的值立即从数据库中取出相关的其它字段的值并显示到当前页面上,是php程序开发中的难点.本文以一个具体实例详细介绍了怎样将两个html内嵌式语言php和javascript巧妙结合起来,解决这个难点的具体方法. 关键词:php.动态.html. 现在的网站已经从以前提供静态信息的形式发展到交互式的提供动态信息业务的方式.web的信息服务形式可以概括为两点:向客户提供信息:记录客户提交的信息.要提供这两种服

  • MySQL 删除数据库中重复数据方法小结

    刚开始,根据我的想法,这个很简单嘛,上sql语句 delete from zqzrdp where tel in (select min(dpxx_id) from zqzrdp group by tel having count(tel)>1); 执行,报错!!~!~ 异常意为:你不能指定目标表的更新在FROM子句.傻了,MySQL 这样写,不行,让人郁闷. 难倒只能分步操作,蛋疼 以下是网友写的,同样是坑爹的代码,我机器上运行不了. 1. 查询需要删除的记录,会保留一条记录. select

  • ajax动态查询数据库数据并显示在前台的方法

    今天做了一个ajax动态查询数据库的小Demo,又重新学习了一下ajax的一些知识.在此和大家分享一下...... 啥都别说了,先上代码 Controller层 查询总用户数 @RequestMapping(value = "/findTotalUsers.do",method = RequestMethod.GET) public @ResponseBody Long findTotalUsers(){ ModelAndView modelAndView = new ModelAnd

  • php获取数据库中数据的实现方法

    废话不多说,直接上代码 <?php header("Content-type:text/html;charset=utf-8");//字符编码设置 $servername = "localhost"; $username = "root"; $password = "root"; $dbname = "web"; // 创建连接 $con =mysqli_connect($servername, $u

  • 使用JDBC从数据库中查询数据的方法

    * ResultSet 结果集:封装了使用JDBC 进行查询的结果 * 1. 调用Statement 对象的 executeQuery(sql) 方法可以得到结果集 * 2. ResultSet 返回的实际上就是一张数据表,有一个指针指向数据表的第一行的前面, * 可以调用next()方法检测下一行是否有效,若有效,返回true,且指针下移, * 相当于iterator 对象的 hasNext() 和 next()方法的结合体 * 3. 当指针定位到一行时,可以通过调用getXxx(index)

  • bootstrap select2 动态从后台Ajax动态获取数据的代码

    效果图展示: 实现方式: 前端代码: <div class="form-group"> <label class="font-noraml">动态多选</label> <select id="bsselect2ID" name="bsselect2ID" class="form-control select2-multiple" type="text&qu

  • 从Oracle数据库中读取数据自动生成INSERT语句的方法

    Oracle INSERT 语句 方法1 我估计有点 SQL 基础的人都会写 INSERT 语句.下面是 SQL 标准写法. INSERT INTO employees (employee_id, name) VALUES (1, 'Zhangsan'); INSERT INTO employees VALUES (1, 'Shangbo'); 方法2 其实, Oracle 还支持下面的写法,作用和上面的语句完全相同. INSERT INTO (SELECT employee_id, name

  • Python使用pymysql从MySQL数据库中读出数据的方法

    python3.x已经不支持mysqldb了,支持的是pymysql 使用pandas读取MySQL数据时,使用sqlalchemy,出现No module named 'MySQLdb'错误. 安装:打开Windows PowerShell,输入pip3 install PyMySQL即可 import pymysql.cursors import pymysql import pandas as pd #连接配置信息 config = { 'host':'127.0.0.1', 'port'

随机推荐