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

sending post data with jquery on form submission

本文关键字：数据 jQuery 表单提交      更新时间：2023-09-26

如果我有这个表格，将帖子数据提交到页面本身：

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

我将如何使用JavaScript/jQuery来注入额外的POST数据。如果我只使用任何函数（如 $.post()、$.get() 或 $.ajax()）通过 ajax 提交表单，这会更容易。但是我在这里想做的是提交表单，而不是通过ajax。

其他数据在 JavaScript 中。我正在考虑将一个新的隐藏字段注入 DOM 中，我将在其中传入数据，以便它与表单一起提交，但是还有其他方法可以做到这一点吗？

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

不要使用提交按钮，而是使用常规按钮并通过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>

<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";
?>
相关文章：