通过带有表单提交的ajax jQuery post保存数据答案

【问题标题】：Save data through ajax jQuery post with form submit通过带有表单提交的ajax jQuery post保存数据
【发布时间】：2013-03-09 06:34:14
【问题描述】：

我有一个表单，我想通过 ajax jQuery post 保存数据。如果保存按钮是type="submit"，它不会做任何这只是空警报...我想保存数据并保持在刷新字段的相同表单上...

这是我尝试过的：

$("#saveNewContact").click(function () {
  var name       = $("#name").val(); 
  var last_name  = $("#last_name").val();
  $.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name},
   success: function(msg){ 
     alert(msg);
  });
 });

这是我的表格

<form id="myForm" action="#" method="post">
<table id="table_1" class="form_table" align="center" cellpadding="0" cellspacing="0">
<tbody>
  <tr><td>
    <input  name="name"  id="name" value="" tabindex="5" readonly="" type="text">
    <input  name="name"  id="name" value="" tabindex="5" readonly="" type="text"> 
    <button type="submit" id="update" style="display:none;" 
     class="save_button saveHEX" name="Update" 
     value="Update Listing">Save Lead</button></td>
  </tr>
 </table>
 </form>

【问题讨论】：

为什么不直接将输入类型设置为button ？
我想在此之后清除表单，空白文本字段
您可以通过其他方式清除它。 $('#myForm').find('input').val(''); 在你的成功函数中做。
mplungjan：是的，我有这个 $(function() {...}) 并且按钮是提交
我可以使用任何验证，或者提交之前等吗？

标签： jquery ajax

【解决方案1】：

这样做

HTML

<form name="frm" method="POST" action="">
 <input type="text" name="name" id="name" value="" />
 <input type="text" name="last_name" id="last_name" value="" />
 <input type="submit" name="Update" id="update" value="Update" />
</form>

你的 jQuery

$("#update").click(function(e) {
  e.preventDefault();
  var name = $("#name").val(); 
  var last_name = $("#last_name").val();
  var dataString = 'name='+name+'&last_name='+last_name;
  $.ajax({
    type:'POST',
    data:dataString,
    url:'insert.php',
    success:function(data) {
      alert(data);
    }
  });
});

所以在insert.php页面中

<?php
  $name = $_POST['name'];
  $last_name = $_POST['last_name'];
  $insert = "insert into TABLE_NAME values('$name','$last_name')";// Do Your Insert Query
  if(mysql_query($insert)) {
   echo "Success";
  } else {
   echo "Cannot Insert";
  }
?>

希望这能给你一个想法

【讨论】：

正是我试过这个..但问题是当按钮类型提交时，它返回空警报...没有数据插入到数据库中...我可以更改 type=submit 吗？
@Methew ：是的，您可以使用 type="submit"。但稍作修改。我已经更新了答案，请检查
我认为使用帖子的dataType属性会更好（或ajax方法->将其设置为json并且不需要丑陋的序列化！api.jquery.com/jQuery.post
我很确定这条 SQL 语句很容易受到 SQL 注入的攻击。

【解决方案2】：

这个删除$("#saveNewContact").click(function () {不需要点击事件，使用.submit() jQuery方法。

还可以使用 .serialize，它允许您使用值序列化表单字段并创建 urlencoded dataString。

$("#myForm").on("submit",function (e)
{
    e.preventDefault();
    var formData = $(this).serialize();
    $.ajax(
    {
        type:'post',
        url:'receiver url',
        data:formData,
        beforeSend:function()
        {
            launchpreloader();
        },
        complete:function()
        {
            stopPreloader();
        },
        success:function(result)
        {
             alert(result);
        }
    });
});

【讨论】：

【解决方案3】：

绑定表单的提交而不是$.post必要的成功，功能就足够了：

$(function() {
  $("#myForm").on("submit",function (e) {
    e.preventDefault(); // stop the normal submission
    var name       = $("#name").val(); 
    var last_name  = $("#last_name").val();
    $.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name},
     function(msg){ 
       alert(msg);
       $("#name").empty(); 
       $("#last_name").empty();
    });
   });
 });

【讨论】：