您的位置：首页 > Web前端 > JQuery

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

2015-11-25 09:42 1161 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航