代码之家 › 专栏 › 技术社区 › Reza

通过jquery从html表单检索HttpGet url

forms html jquery

Reza · 技术社区 · 12 年前

有没有任何方法可以在不提交的情况下从url中检索,有些方法可以模拟通过HTTPGet提交表单。我是说这个例子

<from id="frm" method="POST" action='someaction'>
  <input type='text' id='txt1' value='Hello'/>
<form>

我想在不提交表格的情况下获得以下字符串

someaction?txt1=Hello

4 回复 | 直到 12 年前

Johny 12 年前

解决方案如下:

HTML格式:

<form id="frm" method="POST" action='someaction'>
  <input type='text' id='txt1' value='Hello'/>
  <input type='text' id='txt2' value='World'/>
</form>

Your GET URL is: <div id="url"></div>

Javascript(使用jQuery):

var url = $("#frm").attr("action") + "?";
var urlElements = [];
$("#frm").children().each(function(){
    urlElements.push($(this).attr("id") + "=" + $(this).attr("value"));
});
urlElements = urlElements.join("&");
url += urlElements;
$("#url").html(url);

您可以在此处测试: http://jsfiddle.net/3S9db/

希望此帮助:)

Remmel 10 年前

就像@adeneo说的:

$('#frm').attr('action') + '?' + $('#frm').serialize()

Siamak Motlagh 7 年前

如果您正在讨论向服务器发送数据,可以通过 AJAX 。但实际上没有区别。您必须以某种方式通过HTTP请求发送数据。
通过ajax表单发送与普通表单之间的唯一区别是,在ajax中,页面不会被重新加载,但在普通表单提交中,页面会被重新加载。
还有其他方式,比如 Node.JS 也
但他们都在做同样的事情。您没有任何选择通过HTTP发送数据。

编辑

但如果您想在客户端执行此操作,可以执行以下操作: jsFiddle Live Demo

HTML格式:

<from id="frm" method="POST" action='someaction'>
  <input type='text' id='txt1' value='Hello'/>
  <input type='text' id='txt2' value='hi'/>
  <input type='text' id='txt3' value='hoy'/>
<form>

<a class='link' href="">This is link1<a><br>

JS文件:

var str = $('#frm').attr('action')+'?';
$('#frm input[type="text"]').each(function(i , o) {
   var val = $(this).val();
   var id = $(this).attr('id');
    if(i==0){
         str += id+'='+val;
    }
    else{
        str += '&'+id+'='+val;
    }
});

$('a.link').attr('href', str);

Robert Munn 12 年前

var myaction = $("#frm").attr( "action" );
var txt1 = $( "#txt1" ).val();
var mystr = myaction  + "?txt1=" + txt1;

或

var mystr = $("#frm").attr( "action" ) + "?txt1=" + $( "#txt1" ).val();

然后

$.ajax({
    url: mystr,
    method: "GET"
}).done( function( data ){
   //do whatever 

});

更新时间:

有几种方法可以概括解决方案。一种方法是使用输入按钮调用函数并将其传递给表单,然后从表单id中获取表单数据。

function submitMyForm(frmId){
    var  i, 
         val,
        elements = [],
        ele = $( ":input", "#" + frmId );
    // or
    var i, 
        val,
        elements = [],
        ele = $( "#" + frmId + " > *" );
    // returns an array of form elements for the form you specified
    $.each( ele, function( i, obj ){
      // skip the type = button, otherwise process form elements appropriately
      val = { name: $( obj ).attr('name'), value: $ (obj ).val() });
      elements.push(val);
      // elements should now hold your form values in key/value object pairs. 
    }
}


<input type="button" value="Click" onclick="submitMyForm( $( this ).parent().attr('id')">

这个解决方案假设每个表单都有一个id值。我没有检查代码中的错误,但这应该让你知道需要做什么。$.each函数需要工作-你需要跳过处理按钮,如果你有复选框,你可能需要额外的代码来检测它们是否被选中,等等。