bulidfer
2016-07-06 09:19
采纳率: 35.3%
浏览 6.9k
已采纳

jsp页面 如何接收并且展示 $.ajax 获取的json数组 求大神解决

项目采用springmvc mybatis框架
mysql数据库

1、这是js部分
图片说明
2、这个是控制器部分
图片说明
3、这是jsp页面部分
图片说明
4、这是json解析后的数据
图片说明

5、后台页面穴位 这块显示的都是[object,object]
图片说明

最终的前台页面 要实现这样的效果
图片说明

这是参考网友的代码
test ul,li{list-style:none;} #nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;} #nav li.h_nav_over{background:red;color:#fff;} #nav li.h_nav_over a{color:#fff;} a{text-decoration:none;} $(function(){ var arr =[{"name":"心","id":"1"},{"name":"肝","id":"2"},{"name":"脑袋","id":"3"},{"name":"屁股","id":"4"}]; var arrStr =""; var retStr =""; $.each(arr, function(i, item) { arrStr += '

'+arr[i].name+''; }); $('#xueweiList').append(arrStr); $("#nav>ul>li").click(function(){ if(this.className=='h_nav_over'){ $(this).removeClass("h_nav_over"); var xueweis = retStr.split(','); remove(retStr,this.id); }else{ $(this).addClass("h_nav_over"); retStr += this.id+','; } $("#xueweis").val(retStr); alert($("#xueweis").val()); }); }); function indexOf(arr,val) { for (var i = 0; i < arr.length; i++) { if (arr[i] == val) return i; } return -1; }; function remove(arr,val) { var index = indexOf(arr,val); if (index > -1) { arr.splice(index, 1); } };
效果:图片说明
现在缺少body部分的代码 改怎么对应呀
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

21条回答 默认 最新

  • 留得青山在 2016-07-06 10:12
    已采纳

    你不能再里面那个循环里直接赋值给***.value ,在外面定个变量,循环里每次循环都追加到变量,循环外面再赋值

    点赞 打赏 评论
  • 留得青山在 2016-07-06 09:23

    ajax里面加 dataType:'json', 这个属性

    点赞 打赏 评论
  • 留得青山在 2016-07-06 09:34

    按你这种写法 json[index].xuewei出来是个数组要继续循环 拼接起来再赋值

    点赞 打赏 评论
  • bulidfer 2016-07-06 09:57

    图片说明

    点赞 打赏 评论
  • bulidfer 2016-07-06 10:08

    这样赋值 循环以后 就出来了一个 就是最后的字段 图片说明

    点赞 打赏 评论
  • 留得青山在 2016-07-06 10:18

    var arr = json[index].xuewei;
    var arrStr = '';
    $each(arr,function(i,item)){
    arrStr += arr[i].name;
    }
    document.getElementById("xuewei").value = arrStr;

    点赞 打赏 评论
  • 
        var id1='',name1=''
        $.each(arr, function (index, item) {
            id1 += ',' + json[index].id;
            name1 += ',' + item.name;
        });
        document.getElementById('name1').value = name1.substring(1);
    
    点赞 打赏 评论
  • bulidfer 2016-07-07 01:29

    非常感谢大家 页面可以看到穴位了 但是我主要想实现 每个穴位 都是一个含有隐藏的id的标签 根据需要来取穴 然后 保存 更新到对应的数据库里图片说明

    点赞 打赏 评论
  • bulidfer 2016-07-07 01:31

    图片说明 现在是这个样子

    想实现下面的效果 前端该怎么写图片说明

    点赞 打赏 评论
  • 快乐生活每一天 2016-07-07 01:33

    只出现最后一个值就对了。你代码就是这么写的!你只把最后一个值写上去了。
    你应该先把所有的【xuewei】的值拼成一个字符串,之后,把字符串赋值给文本区域。
    或者,直接循环加入【xuewei】值。
    比如:

    $.each(json, function (index, item) {
        $("#weixin1").append(item.name+",");
    });
    
    点赞 打赏 评论
  • bulidfer 2016-07-07 02:04

    图片说明
    就是这样的效果 用来取穴位用的

    点赞 打赏 评论
  • bulidfer 2016-07-07 02:06

    图片说明

    点赞 打赏 评论
  • 留得青山在 2016-07-07 03:57

    我模拟了下你这个场景 你可以参考下;把选中记录到一个Input(你可以隐藏了),之后提交,后台再截取处理。




    test ul,li{list-style:none;} #nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;} #nav li.h_nav_over{background:red;color:#fff;} #nav li.h_nav_over a{color:#fff;} a{text-decoration:none;} $(function(){ var arr =[{"name":"心","id":"1"},{"name":"肝","id":"2"},{"name":"脑袋","id":"3"},{"name":"屁股","id":"4"}]; var arrStr =""; var retStr =""; $.each(arr, function(i, item) { arrStr += '<li id='+arr[i].id+'><a href="#" >'+arr[i].name+'</a></li><li>'; }); $('#xueweiList').append(arrStr); $("#nav>ul>li").click(function(){ if(this.className=='h_nav_over'){ $(this).removeClass("h_nav_over"); var xueweis = retStr.split(','); remove(retStr,this.id); }else{ $(this).addClass("h_nav_over"); retStr += this.id+','; } $("#xueweis").val(retStr); alert($("#xueweis").val()); }); }); function indexOf(arr,val) { for (var i = 0; i < arr.length; i++) { if (arr[i] == val) return i; } return -1; }; function remove(arr,val) { var index = indexOf(arr,val); if (index > -1) { arr.splice(index, 1); } };




      点赞 打赏 评论
    • 留得青山在 2016-07-07 03:58




      鼠标移到导航上面 当前的LI变色 处于当前的位置 ul,li{list-style:none;} #nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;} #nav li.h_nav_over{background:red;color:#fff;} #nav li.h_nav_over a{color:#fff;} a{text-decoration:none;} $(function(){ var arr =[{"name":"心","id":"1"},{"name":"肝","id":"2"},{"name":"脑袋","id":"3"},{"name":"屁股","id":"4"}]; var arrStr =""; var retStr =""; $.each(arr, function(i, item) { arrStr += '<li id='+arr[i].id+'><a href="#" >'+arr[i].name+'</a></li><li>'; }); $('#xueweiList').append(arrStr); $("#nav>ul>li").click(function(){ if(this.className=='h_nav_over'){ $(this).removeClass("h_nav_over"); var xueweis = retStr.split(','); remove(retStr,this.id); }else{ $(this).addClass("h_nav_over"); retStr += this.id+','; } $("#xueweis").val(retStr); alert($("#xueweis").val()); }); }); function indexOf(arr,val) { for (var i = 0; i < arr.length; i++) { if (arr[i] == val) return i; } return -1; }; function remove(arr,val) { var index = indexOf(arr,val); if (index > -1) { arr.splice(index, 1); } };




        
        
        点赞 打赏 评论
      • 留得青山在 2016-07-07 03:59

        醉啦。。。



        test ul,li{list-style:none;} #nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;} #nav li.h_nav_over{background:red;color:#fff;} #nav li.h_nav_over a{color:#fff;} a{text-decoration:none;} $(function(){ var arr =[{"name":"心","id":"1"},{"name":"肝","id":"2"},{"name":"脑袋","id":"3"},{"name":"屁股","id":"4"}]; var arrStr =""; var retStr =""; $.each(arr, function(i, item) { arrStr += '<li id='+arr[i].id+'><a href="#" >'+arr[i].name+'</a></li><li>'; }); $('#xueweiList').append(arrStr); $("#nav>ul>li").click(function(){ if(this.className=='h_nav_over'){ $(this).removeClass("h_nav_over"); var xueweis = retStr.split(','); remove(retStr,this.id); }else{ $(this).addClass("h_nav_over"); retStr += this.id+','; } $("#xueweis").val(retStr); alert($("#xueweis").val()); }); }); function indexOf(arr,val) { for (var i = 0; i < arr.length; i++) { if (arr[i] == val) return i; } return -1; }; function remove(arr,val) { var index = indexOf(arr,val); if (index > -1) { arr.splice(index, 1); } };




          点赞 打赏 评论
        • 留得青山在 2016-07-07 04:01

          代码贴不好 有问题你私聊我吧效果这样的:
          图片说明
          图片说明

          点赞 打赏 评论
        • 暮云收尽溢清寒 2016-07-07 05:27

          你先弄一个静态的布局html的按照你显示的样式显示的,然后把他用js或jsp代码或el等循环输出就可以了

          点赞 打赏 评论
        • bulidfer 2016-07-08 05:59

          大侠 把你给的代码写到了jsp里面 就是 body部分该怎么写 前端学的太差了 一直做得后台 可以先写死 我自己再调成动态的

          <%@ page language="java" contentType="text/html; charset=utf-8"
          pageEncoding="utf-8"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



          Insert title here ul, li { list-style: none; } #nav li { display: inline-block; margin: 0 5px; background: #ccc; padding: 0 10px; line-height: 24px; font-size: 12px; } #nav li.h_nav_over { background: red; color: #fff; } #nav li.h_nav_over a { color: #fff; } a { text-decoration: none; }

          $(function() { var arr = [ { "name" : "心", "id" : "1" }, { "name" : "肝", "id" : "2" }, { "name" : "脑袋", "id" : "3" }, { "name" : "屁股", "id" : "4" } ]; var arrStr = ""; var retStr = ""; $.each(arr, function(i, item) { arrStr += '<li id='+arr[i].id+'><a href="#" >' + arr[i].name + '</a></li><li>'; }); $('#xueweiList').append(arrStr); $("#nav>ul>li").click(function() { if (this.className == 'h_nav_over') { $(this).removeClass("h_nav_over"); var xueweis = retStr.split(','); remove(retStr, this.id); } else { $(this).addClass("h_nav_over"); retStr += this.id + ','; } $("#xueweis").val(retStr); alert($("#xueweis").val()); }); }); function indexOf(arr, val) { for (var i = 0; i < arr.length; i++) { if (arr[i] == val) return i; } return -1; }; function remove(arr, val) { var index = indexOf(arr, val); if (index > -1) { arr.splice(index, 1); } };


          点赞 打赏 评论
        • bulidfer 2016-07-08 06:03

          ```<%@ page language="java" contentType="text/html; charset=utf-8"
          pageEncoding="utf-8"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
          <%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



          Insert title here ul, li { list-style: none; } #nav li { display: inline-block; margin: 0 5px; background: #ccc; padding: 0 10px; line-height: 24px; font-size: 12px; } #nav li.h_nav_over { background: red; color: #fff; } #nav li.h_nav_over a { color: #fff; } a { text-decoration: none; }

          $(function() { var arr = [ { "name" : "心", "id" : "1" }, { "name" : "肝", "id" : "2" }, { "name" : "脑袋", "id" : "3" }, { "name" : "屁股", "id" : "4" } ]; var arrStr = ""; var retStr = ""; $.each(arr, function(i, item) { arrStr += '<li id='+arr[i].id+'><a href="#" >' + arr[i].name + '</a></li><li>'; }); $('#xueweiList').append(arrStr); $("#nav>ul>li").click(function() { if (this.className == 'h_nav_over') { $(this).removeClass("h_nav_over"); var xueweis = retStr.split(','); remove(retStr, this.id); } else { $(this).addClass("h_nav_over"); retStr += this.id + ','; } $("#xueweis").val(retStr); alert($("#xueweis").val()); }); }); function indexOf(arr, val) { for (var i = 0; i < arr.length; i++) { if (arr[i] == val) return i; } return -1; }; function remove(arr, val) { var index = indexOf(arr, val); if (index > -1) { arr.splice(index, 1); } };


          
          
          
          
          点赞 打赏 评论
        • bulidfer 2016-07-08 06:17

          这个是我目前的 div

          世界卫生组织推荐
          世界卫生组织推荐
          疾病名称: *
          简介:
          取穴:

          点赞 打赏 评论
        • bulidfer 2016-07-08 06:36

          jsp的代码 body部分还没有
          图片说明

          点赞 打赏 评论

        相关推荐 更多相似问题