【问题标题】:jQuery simple form submission without reloadjQuery简单的表单提交,无需重新加载
【发布时间】:2026-01-08 03:15:01
【问题描述】:

谁能给我提供最简单的jquery表单提交代码。网络上有各种各样的 Gizmo 编码。

【问题讨论】:

  • $('form').submit() 是一个明显的答案 - 但可能不是您要搜索的。你能描述一下你想做什么吗?
  • 我有一个简单的删除记录页面,我想删除一条记录。我不想要任何刷新,并且需要 jQuery 来完成这项工作

标签: php jquery


【解决方案1】:
$('#your_form_id').submit(function(){
  var dataString = $("#your_form_id").serialize();

  $.ajax({  
    type: "POST",  
    url: "submit.php",  
    data: dataString,  
    success: function() {  
      alert('Sent!');
    }  
  });

  return false;
});

【讨论】:

  • 对,一旦执行了 sql 查询,我想从 submit.php 中返回一个值。就像我在你的回答中添加评论一样
  • @dave:请参阅此问题以了解如何做到这一点:*.com/questions/388436/jquery-ajax-return-value
  • 成功函数给定参数(data, textStatus)。您可以根据成功函数中接收到的数据进行操作。
【解决方案2】:

这是另一种解决方案,不像Jquery Form Plugin那么简单,但是如果您想自己处理错误代码和消息,它会很有用

看看这个 HTML + Javascript 示例:

    <div>
      <form method="post" id="fm-form" action ="">
      <label>Name:</label>
          <input type="text" id="fm-name" name="fm-name" value="" />
          <label>Email:</label>
          <input type="text" id="fm-email" name="fm-email" value="" />
          <label>Birthdate:</label>
          <input type="text" id="fm-birthdate" name="fm-birthdate" value="" />

          <input type="submit" id="fm-submit" value="Save it">
      </form>
    </div>


<script type="text/javascript">
$(function() {

  // disable the form submission
  $("#fm-form").submit(function () { return false; });

  // post the datas to "submit_form.php"
  $("#fm-submit").click(function() {
  $.post("/ajax/submit_form.php",
      { 'fm-name':$("#fm-name").val(),
      'fm-email':$("#fm-email").val(),
      'fm-birthdate':$("#fm-birthdate").val()
      }
      ,function(xml) {
        // submit_form.php will return an XML or JSON document
      // check it for potential errors
      });
  });

});
</script>

【讨论】:

    【解决方案3】:

    你想要的是jquery form plugin。它允许您使用 ajax 简单地发送普通的“表单”——您可以制作一个不可见的表单并使用这个插件来提交它。 Joel 的答案中的选项也是可能的,这取决于您要提交的内容的复杂性。

    【讨论】:

    • 是的,我会添加东西。它是否与在您的答案中添加评论相同?
    • 是的,确实如此-我不确定*是否特别使用表单插件:)
    【解决方案4】:

    看看Form插件:

    $(function() {
        $('#myForm').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
    

    【讨论】: