【问题标题】:jQuery - Send a form asynchronouslyjQuery - 异步发送表单
【发布时间】:2011-06-26 11:39:42
【问题描述】:

我有一个表格,例如:

<form action='???' method='post' name='contact'>
        <input type="text" class="inputContact" name="mittente" />
        <textarea class="textContact" name="smex"></textarea>
        <input type="submit" value="Send" />
    </div>
</form> 

我想异步发送这些数据,使用 jQuery 函数$.ajax

编辑:有解决方案:

<form name='contactForm'>
    <input type="text" class="inputContact" name="mittente" />
    <textarea class="textContact" name="smex"></textarea>
    <input type="submit" value="Send" />
</form> 

<script type="text/javascript">
$(document).ready(function() {
    $('form[name=contactForm]').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            cache: false,
            url: './ajax/header_ajax.php',
            data: 'id=header_contact_send&'+$(this).serialize(), 
            success: function(msg) {
                $("#boxContentId").html(msg);
            }
        });
    });     
});         
</script>

【问题讨论】:

  • 您到底想知道什么?你已经知道你必须(或想要)使用$.ajax。我猜你已经阅读了它的文档。你被困在哪里了?
  • 我想知道如何通过单击“发送”按钮来执行 $.ajax
  • 附注:在form 中使用name 属性在HTML4 中已被弃用。应改为使用 id 属性。

标签: jquery ajax forms


【解决方案1】:
$('form[name=contact]').submit(function(){

    // Maybe show a loading indicator...

    $.post($(this).attr('action'), $(this).serialize(), function(res){
        // Do something with the response `res`
        console.log(res);
        // Don't forget to hide the loading indicator!
    });

    return false; // prevent default action

});

见:

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-04-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-01
  • 2019-11-30
相关资源
最近更新 更多