JQuery:将 GET URL 转换为 POST

Posted

技术标签:

【中文标题】JQuery:将 GET URL 转换为 POST【英文标题】:JQuery: Convert GET URL to POST 【发布时间】:2012-04-02 15:57:12 【问题描述】:

在 jQuery 中将 GET URL 字符串转换为 POST 的最简单方法是什么?

例如我想要链接的参数

    <a href="/somepage?x=1&amp;y=3" id="postlink">link</a>

如果激活了 javascript,则作为 POST onclick 提交。没有 AJAX,只是普通的表单提交。

有什么想法吗?

谢谢, 汉内斯。

【问题讨论】:

具体说明您的要求..无法弄清楚您的问题是什么?? 发现这可能有用tomengineering.tripod.com/gettopost.html “问题”是如果激活了 javascript,我只想通过 POST 提交数据。我想我可以根据 DOM 的 URL 动态添加一个隐藏的表单。但是有更简单或更优雅的方法吗? 【参考方案1】:

我只是写了这段代码,请检查一下,可能有帮助http://jsfiddle.net/AEwxt/

$('#postlink').click(function() 
    var p = $(this).attr('href').split('?');
    var action = p[0];
    var params = p[1].split('&');
    var form = $(document.createElement('form')).attr('action', action).attr('method','post');
    $('body').append(form);
    for (var i in params) 
        var tmp= params[i].split('=');
        var key = tmp[0], value = tmp[1];
        $(document.createElement('input')).attr('type', 'hidden').attr('name', key).attr('value', value).appendTo(form);
    
    $(form).submit();
    return false;
);

【讨论】:

你为什么重复“.attr('type', 'hidden').attr('name', key).attr('value', value)”?这会触发 jQuery 中的 IE8 错误,并且似乎是一个错字:)【参考方案2】:

演示:http://jsfiddle.net/w5WA6/

function getUrlVars(_url)

    var vars = [], hash;
    var hashes = _url.slice(_url.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];

    

    return vars;


var arVars = getUrlVars($("#test").attr("href"));
for(var i=0;i<arVars.length;i++)
    //put var in input for submition you can change type by `hidden`
    $("#myForm").append("<input type='text' value='"+arVars[arVars[i]]+"' name='"+arVars[i]+"'/>");

​

【讨论】:

【参考方案3】:

稍微修改了 Sergey 的代码,这样当用户“悬停”在链接上时,它不会显示获取请求。

链接:

<a href="#" postURL="/tpl/schRosterSearchSubmit.do?searchReci.uniqueId=&searchReci.studentId=&searchReci.schoolId=3205&searchReci.name.firstName=&searchReci.name.lastName=&searchReci.gender=&searchReci.rdobDay=&searchReci.rdobMonth=&searchReci.rdobYear=&searchReci.rssn1=&searchReci.rssn2=&searchReci.rssn3=&searchReci.phoneNumber=&searchReci.citzOrResAlien=&searchReci.country.isoCountryCode=&searchReci.address.street1=&searchReci.address.street2=&searchReci.address.city=&searchReci.address.state=&searchReci.address.zip=&searchReci.address.zipExt=&searchReci.parentN.firstName=&searchReci.parentN.lastName=&searchReci.parentEmail=&searchReci.parentMAddr.street1=&searchReci.parentMAddr.street2=&searchReci.parentMAddr.city=&searchReci.parentMAddr.state=&searchReci.parentMAddr.zip=&searchReci.parentMAddr.zipExt=&searchReci.parentPAddr.street1=&searchReci.parentPAddr.street2=&searchReci.parentPAddr.city=&searchReci.parentPAddr.state=&searchReci.parentPAddr.zip=&searchReci.parentPAddr.zipExt=&searchReci.pdobDay=&searchReci.pdobMonth=&searchReci.pdobYear=&searchReci.pssn1=&searchReci.pssn2=&searchReci.pssn3=&searchReci.parentCitzOrResAlien=&searchReci.parentCountry.isoCountryCode=&searchReci.addrUpdInd=&searchReci.inactiveDtDay=&searchReci.inactiveDtMonth=&searchReci.inactiveDtYear=&searchReci.ncoaUpdInd=&searchReci.badAddrInd=&branding=upromise&acct=XXXX&schRosterPager.offset=50" class="rnavLink">2nd Page results</a>

转换为 POST onclick:

<script type="text/javascript">
$(document).ready(function() 
    $('.rnavLink').click(function() 
        var p = $(this).attr('postURL').split('?');
        var action = p[0];
        var params = p[1].split('&');
        var form = $('<form/>', action:action, method:'post').appendTo('body');
        for (var i in params) 
            var tmp = params[i].split('=');
            var key = tmp[0], value = tmp[1];
            $('<input/>', type:'hidden', name:key, value:value).appendTo(form);
        
        $(form).submit();
        return false;
    );
);

【讨论】:

【参考方案4】:

您可以使用 HTML 发送表单输入

虽然我不完全确定这背后的基本原理,但如果您必须强制执行 javascript 部分,只需用

【讨论】:

以上是关于JQuery:将 GET URL 转换为 POST的主要内容,如果未能解决你的问题,请参考以下文章

关于JQuery中 $.get() $.post() $.ajax()的区别和使用

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

$.get()/$.post()/$.ajax()/$.getJSON()——Jquery

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结