您的位置:首页 > Web前端 > JavaScript

Ajax前后台交互 返回普通格式和JSON格式

2017-10-20 12:45 302 查看
采用阿里fastJson 下面是pom.xml

<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.9</version>
</dependency>


Ajax返回字符串

//js前台ajax 注意引入jquery文件 如jquery.min.js等
function testAjax() {
//文本的值
var uname = $("#username").val();
var pwd = $("#password").val();
//alert(pwd)
$.ajax({
type : 'post', //提交方式
url : "../ReturnString.do", //路径
//参数
data : {
username : uname,
password : pwd
},
cache : false,
//返回普通的字符流不要写 dataType : "json"
success : function(data) {
alert(data);
}
});
}
//html代码  我绑定的是焦点失去事件 所以加了一个测试框
<form action="#" id="myform">
姓名:<input type="text" id="username" name="username" /><br /> 密码:<input
type="text" name="password" id="password" onblur="testAjax()" /> <br />
测试框:<input type="text" /> <br /> ${pageContext.request.contextPath}
</form>

//后台代码 只是功能测试 没有写实际内容
@RequestMapping("/ReturnString") //这是spring框架的注解
public void ReturnString(String username,String password,HttpServletResponse response){
System.out.println(username+password);
try {
//写入out对象流
response.getWriter().println("测试的字符串");
} catch (IOException e) {
e.printStackTrace();
}
}


Ajax返JSON格式

//前台ajax
function ReturnJsonList() {
$.ajax({
type : 'post',
url : '../ReturnJsonList.do',
dataType : "json",
success : function(data) {
alert(data);
//i循环的次数  value对象 id,name等是属性
$.each(data, function(i, value) {
$("#remark").append(
" <tr><td>" + value.id + "</td><td>"
+ value.name + "</td><td>" + value.t
+ "</td><td>" + value.x + "</td></tr>");
});
}
});
}


//html代码 测试用的按钮的单击时间 然后返回集合拼接到表格
<input type="button" name="测试返回JSON格式List集合" onclick="ReturnJsonList()" />
<table class="table table-striped" id="remark">
<tr>
<td>学号</td>
<td>姓名</td>
<td>日期</td>
<td>年龄</td>
</tr>
</table>


//后台代码
@RequestMapping("/ReturnJsonList")
public void testPrco(HttpServletResponse response){
System.out.println("ok ReturnJsonList");
try {
List<Demo> list = new ArrayList<>();
Demo d1 = new Demo(1,"测试01", 50, new Date());
Demo d2 = new Demo(2,"测试02", 50, new Date());
Demo d3 = new Demo(3,"测试03", 50, new Date());
//日期转换 在实体对象属性上加@JSONField (format="yyyy-MM-dd")
list.add(d1);
list.add(d2);
list.add(d3);
/*Map<Integer, String> map = new HashMap<>();
map.put(1, "test01");
map.put(2, "test02");
map.put(3, "test03");*/
//简单粗暴,对于Map这句也适用
String json = JSON.toJSONString(list);
System.out.println(json);
//取得流向JSP传递数据
response.getWriter().println(json);
} catch (IOException e) {
e.printStackTrace();
}
}




Json格式转换

public static void main(String[] args) {
List<Object> list = new ArrayList<>();
list.add("测试");
list.add("测试2");
list.add("测试3");
//JSON格式转换  map 字符串都适应
String str = JSON.toJSONString(list);
System.out.println(str);
}


结果

["测试","测试2","测试3"]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  json ajax
相关文章推荐