请教各位一个问题一个js和后台之间传值的问题

慕容小伟 发布于 2015/08/15 12:27
阅读 1K+
收藏 0
提交表单里 如何把所有内容拼接成这种格式http://localhost:8080/api_test/api.do
apiname=1&
request_type=get&
key=val&

key=val   

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
    <head>
 
        <meta charset="UTF-8">
 
        <title>API测试工具</title>
        <link href="css/home_apitest.css?version=1.1.2.404"rel="stylesheet"type="text/css"/>
        <script type="text/javascript"src="js/jquery-1.4.2.min.js"></script>
    </head>
 
    <bodyclass="B_home_apitest">
 
        <!--主内容开始-->
 
        <divclass="home_apitest_wrap">
            <divclass="apitest_inner">
                <divclass="home_apitest_banner">
                    <pclass="logo"></p>
                </div>
                <divclass="home_apitest_content"id="pl_api_index">
                    <divclass="inner clearfix">
                        <divclass="inner_left">
                            <!--左侧表单-->
                            <form id="frm"method="post"enctype="multipart/form-data">
                            <divclass="form_apitest">
 
                                <!--<dlclass="s1 clearfix">
                                    <dt>
                    <select select node-type="applist">
                                        <option value="1052846436">Android_开发测试</option>
                                        <option value="92050080">验证登录</option>
                                        <option value="2155061651">test_good_test</option>
                                        <option value="3969159406">php100线下测试</option>
                    </select>
 
                    </dt>
                                    <dd><a href="javascript:;"action-type="getAccessToken"class="W_btn_b"><span>获取Acess Token</span></a></dd>
                                </dl>-->
                                <dlclass="s2">
                                    <!--<dt>Access Token:</dt>
                                    <dd>
                                        <input type="text"node-type="accessToken"class="W_inputStp"value=""/>
                                    </dd>-->
                                </dl>
                                <pclass="line"></p>
                                <dlclass="s3 clearfix">
 
                                    <dt>API分类:</dt>
                                    <dd>
                                        <select node-type="apitype"class="classify">
                                            <option value="java">java接口</option>
                                        </select>
                                    </dd>
                                </dl>
 
                                <dlclass="s3 clearfix">
                                    <dt>API名称:</dt>
                                    <dd>
                                        <select node-type="apiname"class="apiname"name="apiname">
                                            <option>statuses/update</option>
                                            <option>1</option>
                                            <option>s2e</option>
                                            <option>sta3date</option>
                                            <option>s4e</option>
                                            <option>sta5te</option>
                                        </select>
                                    </dd>
                                </dl>
 
                                <dlclass="s3 clearfix"><dt>获取方式:</dt>
                                    <dd>
                                        <label>
                                            <input type="radio"checked="checked"value="get"name="request_type">GET</label>
 
                                        <label>
                                            <input type="radio" value="post"name="request_type">POST</label>
                                    </dd>
                                </dl>
 
                                <dlclass="addbox"node-type="addbox"style="width:243px">
 
                                    <dtclass="W_fb">API参数</dt>
 
                                    <ddclass="inp">
                                        <input type="text"onfocus="clearVal(this)"value="key"class="W_inputStp wid1"name="key">:
                                        <input type="text"onfocus="clearVal(this)"onblur="addVal2(this)"value="value"class="W_inputStp wid2"name="val">
                                        <a href="javascript:;"class="op_closes"action-type="delrow"></a>
                                    </dd>
                                    <ddclass="link"node-type="link"><spanclass="icon_op_add"></span><a href="javascript:;"action-type="addrow"id="add">添加</a></dd>
                                </dl>
 
                                <dlclass="s2">
 
                                    <dd><a href="javascript:;"class="W_btn_b"action-type="request"><span>调用接口</span></a></dd>
 
                                </dl>
 
                            </div>
 
                            <!--/左侧表单-->
                        </form>
                        </div>
 
                        <divclass="inner_right">
 
                            <!--右侧代码-->
                            <divclass="form_code">
                                <dl>
                                    <dt>请求内容:</dt>
                                    <dd style="display:block;"node-type="infobox">
                                        <divclass="W_inputStp heig1"id="text1">
                                        </div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dtclass="clearfix"><emclass="fr"></em>返回的内容:</dt>
                                    <dd>
                                        <div>
                                            <textareaclass="W_inputStp heig2"id="text2"node-type="resultbox"readonly="readonly"></textarea>
                                        </div>
                                    </dd>
 
                                </dl>
 
                            </div>
                        </div>
 
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
        <!--/主内容结束-->
        <noscript>
            <img width="0"height="0"src="images/a.gif"border="0"alt=""/>
        </noscript>
 
        <script type='text/javascript'charset="utf-8">
            functionclearVal(values) {
                    if(values.value !=""& values.value !="key"& values.value !="value") {
                        return;
                    }
                    values.value ="";
                }//点击清空参数
 
            /*function addVal1(object) {
                if (object.value == "") {
                    object.value = "key";
                    return;
                }
                alert(object.getElementsByTagName("input").value);
            };*/
 
            functionaddVal2(object) {
                if(object.value =="") {
                    object.value ="value";
                }
            };
            $(function() {
                $('.op_closes').live('click',function() {
                    $(this).parent().remove();
                });
                $('#add').click(function() {
                    $(this).parents('.link').before("<dd class='inp'><input type='text' onfocus='clearVal(this)' onblur='addVal1(this)' value='key' class='W_inputStp wid1' name='key'>: <input type='text' onfocus='clearVal(this)' onblur='addVal2(this)' value='value' class='W_inputStp wid2' name='val'> <a href='javascript:;' class='op_closes' action-type='delrow'></a></dd>");
                });
                 
                $('.wid1').live('blur',function(){
                    if($(this).val() =="") {
                        $(this).val("key");
                        return;
                    }
                    $(this).next('input').attr('name',$(this).val());
                    //alert($(this).next('input').val());              
                });
                 
                //调用接口
                $('.W_btn_b').live('click',function() {
                    //得到相关数据
                    $('.classify').val();//得到分类
                    $('.apiname').val();//得到api名称
                    $.each($(".inp"),function(i, n) {
                        $key = $(n).children("input[name='key']").val()//得到key
                        $val = $(n).children("input[name='key']").val()//得到value
                         
                    });
                     
                    varo = {};
                    varparam ="";
                     
                    $.each($('#frm').serializeArray(),function(index) {
                    if(this['value'] != undefined &&this['value'].length > 0) {
                        if(o[this['name']]) {
                            o[this['name']] = o[this['name']] +","+this['value'];
                        }else{
                            o[this['name']] =this['value'];
                            param+='&'+this['name']+'='+this['value'];
                        }
                    }
                    });
                 
                    if($('input:radio[name="request_type"]:checked').val() =="get") {
                        $.get("url.do", data,function(r) {
                            $("#text1").val("");//显示请求内容参数
                            $("#text2").val(r);//显示返回内容参数
                        });
                    }else{
                        $.post("url.do",data,function(r) {
                            $("#text1").val("");//显示请求内容参数
                            $("#text2").val(r);//显示返回内容参数
                        });
                    }
                });
            });
        </script>
 
    </body>
 
</html>

加载中
0
双_双
双_双
$("#frm").serialize();
慕容小伟
慕容小伟
@双_双 不好拼呢;而且要拉全部的
双_双
双_双
回复 @甘奇才 : 哦,刚才没仔细看问题。那你就写个方法手动的拼字符串了。key1=value1&key2=value2&key3=value3
慕容小伟
慕容小伟
serialize()是找到Name和value值;但是我现在要把两个输入框;做为键值拼起来;
0
ZaMiHu
ZaMiHu
var queryObject = form.serializeObject();


function JsonQueryData(KeyList, queryObject) {
    var res = [];
    for (key in KeyList) {
        res.push(key + '=' + queryObject[key]);
    }
    return res.join('&');

}


表单里面的控件应该要指明 Name属性吧

慕容小伟
慕容小伟
感谢了;能加下Q不;还有点地方不太明白
返回顶部
顶部