Question

我一直试图让我的html表单在加载页面时自动启动，而不是单击按钮但是无法获取$.ajax，$.get和{{1}方法与提交按钮完全相同地执行提交。

我的第一种方法是使用常规按钮：

$.post

这完全符合我的预期，但我希望表单在页面加载时自动提交，所以：

  <input style="width:80%;margin-left:10%;display:none;" class="span2" name="latest" id="latest" type="text" value="">
  <input style="" type="submit" value="Go" name="/latest">

这没有按预期执行，而是从/ latest路由返回值而不是返回相同的页面。

此方法也不起作用：

    <div id="cont2">
      <script type="text/javascript">
      var a=$('#target').serialize();
$.ajax({
    type:'post',
    url:'/latest',
    data:a,
    beforeSend:function(){
        alert("click");
    },
    complete:function(){
        alert("complete");
    },
    success:function(result){
         alert(result);
         $( '#cont2' ).html();

    }
});
        </script>
</div>

由于路线是POST路线，因此预计会提交一个帖子，但这也不起作用：

      <script type="text/javascript">
$.get( "/latest", function( data ) {
  $( "#cont2" ).html( data );
  alert( "Load was performed." );
});
        </script>

点击按钮后实际有效的路线是：

     <script type="text/javascript">
  $('form[name=target]').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(json) {
      alert(json);
    }, 'json');
    return false;
  });
        </script>

简而言之，当单击该按钮时，它们都按预期执行。但是当使用jquery提交表单时（所以我可以自动完成）我无法让表单返回相同的响应。任何帮助解决这个问题将不胜感激。

Answer 1

$.ajax以及您正在使用的其他方法，以不同的方式（以异步方式）提交表单，而不是正常的表单提交（这会导致页面重新加载）。如果您希望它的行为与我们点击表单的submit按钮时的行为相同，您可以在该表单上触发submit。

<form id="myform" method="post" action="/your_form_handler">
  <input style="width:80%;margin-left:10%;display:none;" class="span2" name="latest" id="latest" type="text" value="">
  <input style="" type="submit" value="Go" name="/latest">
</form>


$(document).ready(function(){
  $("#myform").submit();
});//document ready

Answer 2

假设您的表单如此，

<form action="your_url" style="display:none" id="your_form_id">      
    <input style="width:80%;margin-left:10%;" class="span2" name="latest" id="latest" type="text" value="">
    <input style="" type="submit" value="Go" name="/latest">
</from>

如果您需要在加载当前窗口的所有元素后显示表单，您也可以使用下面的代码，

$(window).load(function () {
  $('#your_form_id').show();
});

除此之外，如果您想根据点击的按钮在特定网址上提交表单，那么您应该使用

<input type="button" value="Go" name="Go" id="go"/>

代替，

<input type="submit" value="Go" name="Go" id="go"/>

因为如果您使用<input type ="submit"...../>，那么您的表单会根据您的action格式提交。因此，如果您想将表单提交到特定网址，请使用按钮点击功能。请参阅下面的示例

<form action="to_some_url" id="someForm">
    <input type="button" value="Go" name="Go" id="goButton"/>
    <input type="submit" value="Go" name="Go" id="go"/>
</form>

<script>
$('#goButton').click(function(){
    $("#someForm").action= "another_url";
    $("#someForm").submit();
});
</script>

此处<input type="submit"..../>提交您的表单to_some_url，<input type="button"...../>将您的表单提交至another_url。如果您没有得到答案，请告诉我。

jquery提交和按钮提交的差异

2 个答案: