iQuery提交表单没有页面重新加载

Question

我有一个窗体有一个隐藏的字段和一个按钮。当按钮被点击时，我希望它运行一个jQuery脚本，它反过来调用一个PHP脚本来更新底层数据表。

如何在单击表单按钮时运行jQuery函数。

我的jQuery

$(document).ready(function(){ 
    $('#roominput').click(function(){ 
     $.post('alert_update.php', { recordid: form1.RecordID.value }, 
     function(result) { 
      console.log(); 
     }); 
    }); 
}); 

我的形式

<form id="form1" name="form1" method="post" id="ajax"> 
    <input type="image" src="../../../../conf_images/butler_request.png" name="alert_button" id="alert_button" value="Submit" /> 
    <input type="hidden" name="MM_update" value="form1" /> 
    <input type="hidden" id="alert" name="RecordID" value="<?php echo $row_ConfAlert['RecordID']; ?>" /> 
</form> 

谁能帮我这个问题，非常感谢您的时间。

Answer 1

使用submit事件的形式，而不是点击。然后使用e.preventDefault();来防止重新加载。然后使用$(this).serialize()获取表单数据并传递给服务器。

$('#form1').submit(function(e){ 
    e.preventDefault(); 
    $.post('alert_update.php', $(this).serialize(), function(result) { 
     console.log(); 
    }); 
}); 

Answer 2

，你也可以使用这个

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#roominput').click(function(){ 
     $.ajax({ 
      url: "alert_update.php", 
      dataType: 'json', //if your data type is json 
      data: $('#form1 [name="RecordID"]').val(), 
      success: function(response) { 
      console.log(); 
      } 
     }); 
     return false; 
    }); 
    $('#form1').on("submit", function(){ 
     return false; 
    }) 
}); 
</script> 

Answer 3

Ajax in Jquery in commonly used for doing some submit actions without page reload. 

结帐http://www.w3schools.com/jquery/jquery_ajax_intro.asp