怎么用ajax从db2获取数据,并显示在网页上 80C

前端:html+js
后端:db2

能不能举个简单的例子。
最好能有解释和代码。

3个回答

html加个点击事件就行
$.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从db2获取数据,并显示在网页上:这个描述不够具体,不知道你后台用什么技术,网页上以什么样的方式展示?表格还是,一些展示框。
我只能提供你一些建议,然后不会的百度就可以了
通过ajax发送请求到后台,后台查询数据库将记录转正json字符串传到前台,
由于json与js的对象可以直接互转,你需要做的是将json对象的值赋值到html控件中,js很容易实现

var url = 'http://127.0.0.1:8080/video/account/getVideoList.do' //原生ajax function getData(){ $.ajax({ url:url, type:'get', dataType:'json', async:false, success:function(ret){ if(data.code==0){ layer.msg('数据加载成功、祝您观影愉快',{icon: 6,time:1300}); console.log(ret.data); //执行你显示的逻辑 }else{ //如果没有引入layer,就换成alert('浏览器异常') layer.msg('浏览器异常',{icon: 5,time:1000}); } }, error:function(){ //如果没有引入layer,就换成alert('站点处于维护中') layer.msg('站点处于维护中',{icon: 5,time:1000}); } }); return list; } //jquery 的ajax,({}里面的是参数,如:{uid:1,uname:'李白'} ) $.get(url,{},function(ret){ console.log(ret.data); //执行你显示的逻辑 })

后台
@RequestMapping(value="/getVideoList.do",method= {RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public TableResult getVideoList() throws Exception
{
TableResult resultMap = new TableResult();
//你的查询逻辑开始
List list = new ArrayList();
try {
if(ValidateUtil.isNotEmpty(channelType)) {
list = videoService.selectChanelType(limit, (page-1)*limit, channelType);
}else {
list = videoService.getAll(limit,(page-1)*limit);
}
//你的查询逻辑结束
resultMap.setCode(0);

resultMap.setCount(videoService.countVideo());
resultMap.setMsg("获取数据成功");
resultMap.setData(list);
System.out.println("获取数据成功");
}catch(Exception e) {
resultMap.setCode(500);

resultMap.setCount(0);
resultMap.setMsg("获取数据失败");
resultMap.setData(null);
System.out.println("获取数据失败");
e.printStackTrace();
}
return resultMap;

}

//定义返回体类型
package com.video.utils;

public class TableResult {

private int code;

private String msg;

private int count;

private Object data;

public int getCode() {
    return code;
}

public void setCode(int code) {
    this.code = code;
}

public String getMsg() {
    return msg;
}

public void setMsg(String msg) {
    this.msg = msg;
}

public int getCount() {
    return count;
}

public void setCount(int count) {
    this.count = count;
}

public Object getData() {
    return data;
}

public void setData(Object data) {
    this.data = data;
}

@Override
public String toString() {
    return "TableResult [code=" + code + ", msg=" + msg + ", count=" + count + ", data=" + data + "]";
}

}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题