协慌网

登录 贡献 社区

jQuery AJAX 提交表单

我有一个名为orderproductForm的表单和一个未定义的输入数。

我想做某种 jQuery.get 或 ajax 或类似的东西,它会通过 Ajax 调用页面,并发送orderproductForm形式的所有输入。

我想有一种方法可以做类似的事情

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

但是我并不完全知道所有表格输入。是否有功能,功能或其他东西只发送所有表单输入?

答案

这是一个简单的参考:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });


});

我希望它对你有所帮助。

您可以使用Ajax Form Plugin 中的 ajaxForm / ajaxSubmit 函数或 jQuery serialize 函数。

AjaxForm

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

要么

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

当按下提交按钮时,ajaxForm 将发送。 ajaxSubmit 立即发送。

序列化

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

AJAX 序列化文档在这里

使用表单元素上定义的属性的另一个类似解决方案

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>