java web表单提交ajax参数封装方法

<form id="headForm" name="headForm">
                <table id="headTable" id="headTable" style="display: block">
                    <tr>
                        <td colspan="9">
                            <h3>MESSAGE HEAD</h3>
                        </td>
                    </tr>
                    <tr>
                        <td><label>ver</label><input class="message-head" type="text"
                            id="ver" name="ver" value="0.1" size="5"/></td>
                        <td><label>src</label><input class="message-head" type="text"
                            id="src" name="src" value="credit" size="5"/></td>
                        <td><label>dst</label><input class="message-head" type="text"
                            id="dst" name="dst" value="cfe" size="5"/></td>
                    </tr>
                    <tr>
                        <td><label>msgNo</label><input class="message-head"
                            type="text" id="msgNo" name="msgNo" value="0005" size="5"/></td>
                        <td><label>msgType</label><input class="message-head"
                            type="text" id="msgType" name="msgType" value="query" /></td>
                        <td><label>msgId</label><input class="message-head"
                            type="text" id="msgId" name="msgId" value="00000000000000000001" size="25" maxlength="20"/>
                        </td>
                    </tr>
                    <tr>
                        <td><label>msgRef</label><input class="message-head"
                            type="text" id="msgRef" name="msgRef" value="R0000000000000000001" size="25" maxlength="20"/></td>
                        <td><label>sysTime</label><input class="message-head"
                            type="text" id="sysTime" name="sysTime" value="2016-1-18 1:23:45" />
                        </td>
                        <td><label>reserve</label><input class="message-head"
                            type="text" id="reserve" name="reserve" value="" /></td>
                    </tr>
                    <tr>
                        <td colspan="9">
                            <hr />
                        </td>
                    </tr>
                </table>

            </form>


<form id="form3" name="form3">
                <table id="table3" id="table3" style="display: none">
                    <tr>
                        <td>
                            <h3>MESSAGE BODY</h3>
                        </td>
                    </tr>
                    <tr>
                        <td><label>requesterNo</label><input class="message-body"
                            type="text" id="requesterNo" name="requesterNo"
                            value="requester01" /></td>
                    </tr>
                    <tr>
                        <td><label>queryInterface</label><input class="message-body"
                            type="text" id="queryInterface" name="queryInterface" value="queryCredit" /></td>
                    </tr>
                    <tr>
                        <td><label>plate</label><input class="message-body"
                            type="text" id="plate" name="plate" value="1" /></td>
                    </tr>
                    <tr>
                        <td><label>certtype</label><input class="message-body"
                            type="text" id="certtype" name="certtype" value="0" /></td>
                    </tr>
                    <tr>
                        <td><label>certno</label><input class="message-body"
                            type="text" id="certno" name="certno" value="110114199103059313" /></td>
                    </tr>
                    <tr>
                        <td><label>name</label><input class="message-body"
                            type="text" id="name" name="name" value="测试借款人1(txt)" /></td>
                    </tr>
                    <tr>
                        <td><label>reason</label><input class="message-body"
                            type="text" id="reason" name="reason" value="02" /></td>
                    </tr>
                    <tr>
                        <td style="width: 18%"><button type="button"
                                onClick="jsonSubmit3(this.form)">json方式提交</button></td>
                    </tr>
                </table>
            </form>


<script>


function jsonSubmit3(objForm) {
            // json object
            var jsonObj = {}; //声明一个空数组
            var heads = $("#headForm").find(".message-head").serializeArray(); //获取标签内的数据serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)
            //alert(heads);
            // heads is form object array
            $.each(heads, function(i, item) {   //heads 标签有N个需要一次遍历出来,i遍历的次数,item内容
                jsonObj[item.name] = item.value;  //遍历出来的数据放到空数组中,格式为 {"name":"value"}
            });
            //console.info(JSON.stringify(jsonObj));

            var bodies = $(objForm).find(".message-body").serializeArray();// objForm 就是提交表单的数据
            // bodies is form object array
            var queryInterface = "";
            $.each(bodies, function(i, item) {
                if ("queryInterface" == item.name) {
                    queryInterface = item.value;
                }
                jsonObj[item.name] = item.value;
            });
            //console.info(JSON.stringify(jsonObj));

            // handle innerMessages
            var iJsonObj = {};
            var innerMessages = $(objForm).find(".inner-message")
                    .serializeArray();
            $.each(innerMessages, function(i, item) {
                iJsonObj[item.name] = item.value;
            });
            jsonObj["msg"] = iJsonObj;
            //console.info(JSON.stringify(jsonObj));

            $("#resultTable").empty();
            
            //alert(JSON.stringify(jsonObj));
            // 用ajax方法提交,因为要返回出错信息
            $.ajax({
                type : "POST",
                url : "/cfe/msgex/nfcs/rest/" + queryInterface,
                //url: "${ctx}/TestServlet",
                data : JSON.stringify(jsonObj),  //stringify用于从一个对象解析出字符串
                contentType : "application/json;charset=utf-8",
                dataType : "json",
                success : function(data, textStatus, jqXHR) {
                    var desc = eval(data);
                    $("#resultTable").append(
                            "<tr><td>查询结果</td></tr>");

                    var jsonString = JSON.stringify(desc);
                    $("#resultTable").append(
                            "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;"
                                    + jsonString
                                    + "</td></tr>");
                    
                },
                error : function(jqXhr, status, error) {
                    alert("错误状态: " + jqXhr.status + "; 错误信息: "
                            + jqXhr.statusText + "\n" + jqXhr.responseText);
                }
            });

        }


</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值