jquery与后台进行数据交互--前台发单一数据对象，后台返回一个json字符串 jsp页面

来源：互联网发布：中国数据南京编辑：程序博客网时间：2024/05/16 10:19

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script language="javascript" type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:13px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
.btn {border:#666 1px solid;padding:2px;width:80px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
</head>



<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button"
class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
<script type="text/javascript">
var JSONDATA=[
{
"name": "陶国荣",
"sex": "男",
"email": "tao_guo_rong@163.com"
},
{
"name": "李建洲",
"sex": "女",
"email": "xiaoli@163.com"
}
];


$(function()
{
var s1="liu";
var s2="123";
$("#Button1").click(function()
{
/* 发送单个数据到后台，并解析后台传过来的json对象*/
/* var $params="name="+s1+"&pwd="+s2+"";
$.ajax({
type : "POST",
url: "http://192.168.6.33:8080/TestJqueryAjax/link?action=test",
data: $params,
success: function(msg)
{

var strHTML = "";
var parsedJson = jQuery.parseJSON(msg); //因为后台传递过来的是一种json字符串，所以采用这种解析方式

strHTML += "姓名：" + parsedJson.name + "<br>";
strHTML += "性别：" + parsedJson.sex + "<br>";
strHTML += "年龄：" + parsedJson.age + "<hr>";

$("#divTip").html(strHTML); //显示处理后的数据
},
error:function(errormsg)
{
alert(errormsg);
}
});
*/

//方式二：发送json对象到后台
var jsonData={data:"[{'name':'123','age':'25','sex':'man'}]"}; // 第一种封装方式：封装json对象
var Data={}; //第二种,传一个对象
Data.name="刘蒙尘";
Data.sex="男";
Data.age="25";

var jsonObj=JSON.stringify(Data); //注意这个函数
alert(jsonObj);
$.ajax({
type:"POST", //与后台交互方式
url: "http://192.168.6.33:8080/TestJqueryAjax/link?action=test",
data:{data:jsonObj}, //当采用方式发送json对象时，因为Data是一个对象，还不是一个json所以需要在此处将其转为json对象
dataType:'json',
contentType:"application/x-www-form-urlencoded; charset=utf-8",//设置编码方式
cache:false,
success:function(msg)
{

alert("success:"+msg);
},
error:function(errormsg)
{
alert("error:"+errormsg);
}
});


});
});

</script>

</html>

0 0