JQuery 发送Json格式数据

最新推荐文章于 2023-09-15 14:41:50 发布

weixin_33777877

最新推荐文章于 2023-09-15 14:41:50 发布

阅读量264

点赞数

文章标签： json javascript java ViewUI

本文介绍如何利用jQuery库和AJAX Post请求将JSON格式的数据封装并发送到服务器，包括下载jQuery和jQuery.json库，展示了一个简单的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简述：

需要封装一组Json格式的数据到服务器

知识点：

1. 调用jquery.json的库

2. AJAX Post 请求

Jquery下载地址

http://jquery.com/download/

Jquery.json

http://code.google.com/p/jquery-json/

代码：

testSendJson.jsp

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>
<head>
<title>发送Json格式数据</title>

<script type="text/javascript" src="./lib/js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="./lib/js/jquery.json-2.4.min.js"></script>

<script type="text/javascript">
function sendJson() {
    var requestStr = {
            reqStr:  'test parameter'
    };
    var request = { 
            requestId: 'asdfasdfa',
            sessionId: 'asdfasdfasdf',
            userName: 'Jeremy',
            password:'123',
            request: requestStr
    };
    //调用了jquery.json 库
    var encoded = $.toJSON( request );
    var jsonStr = encoded;
    var actionStr = $("#actionPath").val();
    $.ajax({
        url : "${ctx}/" + actionStr,
        type : 'POST',
        data : jsonStr,
        dataType : 'json',
        //contentType : 'application/json',
        success : function(data, status, xhr) {
//         Do Anything After get Return data
//            $.each(data.payload, function(index){
//                $("#result").append("</br>" + data.payload[index].beanStr);
//            });
        },
        Error : function(xhr, error, exception) {
            // handle the error.  
            alert(exception.toString());
        }
    });
}
</script>
</head>
<body>
    <!-- Send JSON -->
    <B>Action Path:   </B><input id="actionPath"  type="text"  style="width: 300px;"/>
    <button class="button" id="buttonUpload" style="margin-left:10px;"
                onclick="return sendJson();">Send</button>
    <div id="result" >result: </div>
</body>
</html>