使用jQuery在表单提交时发送POST数据

Question

使用jQuery在表单提交时发送POST数据

8

如果我有一个表单，其将提交的数据发送到页面本身：

<form method="post">
   <input type="text" name="name"/>
   <input type="submit"/>
</form>

我如何使用JavaScript/jQuery注入额外的POST数据？如果我只是使用任何一个像$.post()，$.get()或$.ajax()这样的函数通过ajax提交表单，那么这将会更容易。但是，我想在此处提交表单而不是通过ajax进行提交。

附加的数据在JavaScript中。我考虑只需向DOM中注入一个新的隐藏字段，在其中传递数据，以便随表单一起提交，但是否有其他方法可以实现？

如果需要更多的代码/解释，请评论。

- Wern Ancheta

2个回答

1

<head>
    <script src="jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(function () {
        $('#form_id').on('click','#submit', function(e){
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "get_Ajax.php",
                data: $('#form_id').serialize(),
                success: function(data) {
                    alert(data);
                }
            });
            return false;
        });
    });
    </script>
</head>
<form method="post" id="form_id">
<input type="text" name="ime">
<input type="button" id="submit" name="submit" value="Send">
</form>

** get_ajax.php**

<?php
$ime = $_POST['ime'];

echo "Your name is $ime";
?>

- Raja Manickam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeremy Harris · Accepted Answer

不要使用提交按钮，而是使用普通按钮，并通过Javascript控制提交。在您的javascript中，您需要序列化表单并将其作为数据传递，以及其他任何您想要的内容。

<script>

    $(document).ready(function() {

       var extra_data = "This is more stuff to send";

       $('#submit').click(function() {
          $.ajax({
             type: "POST",
             url: "form.php",
             data: {'form': $("#my_form").serialize(), 'other': extra_data},
             success: function(msg) {
                alert("Form Submitted: " + msg);
             }
          });

       });

    });

</script>

<form id="my_form" method="post">
  <input type="text" name="name" />
  <input type="button" id="submit" />
</form>