前台jquery+ajax+json传值，后台处理完后返回json字符串，如何取里面的属性值？（不用springmvc注解）

前台jquery+ajax+json传值，后台处理完后返回json字符串，如何取里面的属性值？（不用springmvc注解）

一.取属性值

前台页面：

function select(id){
alert(“hfdfhdfh”+id);
$.ajax({<br> url:"selectByid.jsp",<br> <span style="background-color: #ffff00;">datatype:'json',</span><br> data:{id:id}, // 发送数据 <br> error:function(data){ <br> alert("出错了,没有这个学生！！"); <br> }, <br> success:function(data){<br> alert(data);<br> <span style="background-color: #ffff00;">var json = eval("("+data+")");//将json类型字符串转换为json对象</span><br> alert("hjf"+json.name);<br>$("#id").val(<span style="background-color: #ffff00;">json.id</span>),<br> $("#name").val(<span style="background-color: #ffff00;">json.name</span>),<br>$("#age").val(<span style="background-color: #ffff00;">json.age</span>);<br> if(<span style="background-color: #ffff00;">json.sex</span>=='男'){<br> $("input:radio[name='sex']").eq(0).attr("checked",true);<br> //$("input[name=sex]").attr("checked","checked");<br> // $("#sex").attr("checked",'checked');<br> //$("#sex").removeAttr("checked");<br> }else{<br> $("input:radio[name='sex']").eq(1).attr("checked",true);<br> //$("input[name=sex]").attr("checked","checked");<br> //$("#sex").attr("checked",'checked');<br> //$(“#sex”).removeAttr(“checked”);
}
}

后台代码：

<%@ page language=”java” import=”java.util.*,com.dao.*,com.bean.*,com.fasterxml.jackson.databind.ObjectMapper” pageEncoding=”utf-8”%>
<%
int id = Integer.parseInt(request.getParameter(“id”));
StudentDao dao = new StudentDao();
StudentBean bean = dao.selectByid(id);
if(bean!=null){
ObjectMapper x = new ObjectMapper();
String str = x.writeValueAsString(bean);    //将java类对象转换为json字符串
System.out.print(str);
response.getWriter().print(str);    //将数据返回前台ajax
}
%>

二.前端ajax接不到json值怎么回事？

前台页面：

function ajaxPost(){
$.ajax({ <br> data:{"name":$("#name").val(),<br> "age":$("#age").val(),<br> "sex":$(“input[name=’sex’]:checked”).val()},
type:”Post”,
async:false,                //加上这个属性就好了
dataType: ‘json’,
url:”addStudent.jsp”,
error:function(data){
alert(‘添加失败！’);
},
success:function(data){
alert(‘添加成功！’);
window.location.href = ‘list.jsp’
}
});
}

后台代码：

<%@ page language=”java” import=”java.util.*,com.dao.*,com.bean.*” pageEncoding=”utf-8”%>
<%
String name = request.getParameter(“name”);
int age = Integer.parseInt(request.getParameter(“age”));
String sex = request.getParameter(“sex”);
StudentBean student = new StudentBean();
student.setName(name);
student.setAge(age);
student.setSex(sex);
StudentDao dao = new StudentDao();
int rows = dao.addStudent(student);
if(rows>0){
response.getWriter().print(“{}”);
}
%>

三.后台查询数据库返回集合，前台显示在表格中。

前台页面：

$(document).ready(function(){<br>$(“#list4”).jqGrid({                //jqGrid 表格控件
url:”selectStudent.jsp”,
datatype:”json”,
mtype:”POST”,
height:600,
postData:”{SearchSql:”}”,
autowidth:true,
colNames:[‘ID’,’姓名’,’年龄’,’性别’],
colModel:[
{name:’id’,index:’id’,hidden:true},
{name:’name’,index:’name’},
{name:’age’,index:’age’},
{name:’sex’,index:’sex’},

],
rownumbers:true,
viewrecords: true,
jsonReader:{
id: “blackId”,
repeatitems : false
},
pager:$(‘#gridPager’)
});
});

后台代码：

<%@ page language=”java” import=”java.util.*,com.dao.*,com.bean.*,com.fasterxml.jackson.databind.ObjectMapper” pageEncoding=”utf-8”%>
<%
StudentDao dao = new StudentDao();
List<StudentBean> list = dao.selectAll();
if(list!=null){
ObjectMapper x = new ObjectMapper();
String str1 = x.writeValueAsString(list);      //集合转json类型字符串
response.getWriter().print(str1);    //返回前端ajax
}
%>

 

分类: 前端

好文要顶 关注我 收藏该文

小娜与明羽
关注 - 7
粉丝 - 7

+加关注

2

0

« 上一篇： 为大型网站提速—redis
» 下一篇： 解决ora-00054 Oracle锁表问题

    </div>
    <div class="postDesc">posted @ <span id="post-date">2016-09-08 17:06</span> <a href="http://www.cnblogs.com/yuxiaona/">小娜与明羽</a> 阅读(<span id="post_view_count">6623</span>) 评论(<span id="post_comment_count">0</span>)  <a href="https://i.cnblogs.com/EditPosts.aspx?postid=5853732" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(5853732);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=299785,cb_entryId=5853732,cb_blogApp=currentBlogApp,cb_blogUserGuid='3f18992d-aa62-e611-9fc1-ac853d9f53cc',cb_entryCreatedDate='2016/9/8 17:06:00';loadViewCount(cb_entryId);</script>

刷新评论 刷新页面 返回顶部

注册用户登录后才能发表评论，请 登录 或 注册， 访问网站首页。

【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【域名】腾讯云 新注册用户域名抢购1元起
【推荐】报表开发有捷径：快速设计轻松集成，数据可视化和交互

最新IT新闻:
· 任正非为何要求华为做低端手机?或为开拓印度非洲
· 共享快递盒“双11”启用：每个用千次 单次成本仅0.025元
· 别管趣店了，看看美国金融科技11大“独角兽”
· 面板价格回升LG Display三季度运营利润飙升80%
· 乐视网CEO梁军将离职 新乐视扭亏需猛将
» 更多新闻…

最新知识库文章:

· 实用VPC虚拟私有云设计原则
· 如何阅读计算机科学类的书
· Google 及其云智慧
· 做到这一点，你也可以成为优秀的程序员
· 写给立志做码农的大学生

» 更多知识库文章…

fixPostBody(); setTimeout(function () { incrementViewCount(cb_entryId); }, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);

</div><!--end: forFlow -->
</div>