Question

这对我不起作用。结果显示在行动表单页面中。

jquery的：

<script type="text/javascript">
$(document).ready(function() {
    $("#em2").submit(function() { 
        $.ajax({ 
            data: $(this).serialize(), 
            type: $(this).attr('method'), 
            url: $(this).attr('action'), 
            success: function(response) { 
                $('#resultados').html(response); 
            }
        });
        $('html, body').animate({
            scrollTop: $('#resultados').offset().top -292 
        }, 'slow');
        return false; 
    });
});
</script>

HTML：

<form id="em2" name="em2" action="resultados.php" method="post">
    <input type="hidden" name="e" value="No" />
    <input type="hidden" name="b" value="empleo" />
    <input type="hidden" name="q" value="02" />
</form>

<a href="javascript:void(0)" onclick="javascript:document.forms['em2'].submit();return false;">Ver</a>
    .
    .
    .
<div id="resultados">

</div>

通过提交表单，结果显示在新窗口中（resultados.php）。

我不明白为什么。

Answer 1

表单元素的默认行为是显示您在＆＃34; action＆＃34; -attribute中放置的页面。

您可以通过更改jQuery代码的这一行来解决此问题......

$("#em2").submit(function() { 
    $.ajax({

......对此：

$("#em2").submit(function(e) { 
    e.preventDefault();
    $.ajax({

这样，您可以阻止默认的HTML表单行为！

Answer 2

你的触发器就是问题;而不是触发submit事件，以下行只是默认情况下提交表单。要实际触发submit事件，您需要submit按钮或使用jQuery来使用以下任何形式触发事件：$('#em2').submit(), $('#em2').trigger('submit')：

<a href="javascript:void(0)" onclick="javascript:document.forms['em2'].submit();return false;">Ver</a>

将其更改为this working example中的以下内容：

<a href="javascript:void(0)" onclick="javascript:$('#em2').submit();return false;">Ver</a>

或者尝试避免内联js并执行以下操作（推荐）：

<a id='theTrigger' href='#'>Ver</a>

$(function() {
    $('#theTrigger').on( 'click',  function() {
        $('#em2').submit();
    });
});

有效地将您的代码更改为：

$(document).ready(function() {
    $('#theTrigger').on( 'click',  function() {
        $('#em2').submit();
    });    
    $("#em2").submit(function() { 
        $.ajax({ 
            data: $(this).serialize(), 
            type: $(this).attr('method'), 
            url: $(this).attr('action'), 
            success: function(response) { 
                $('#resultados').html(response); 
            }
        });
        $('html, body').animate({
            scrollTop: $('#resultados').offset().top -292 
        }, 'slow');
        return false; 
    });
});

提交表单，然后在现有div中显示结果

2 个答案: