iQuery提交表单,无需重新加载页面

时间:2016-02-19 16:08:55

标签: jquery

我有一个有一个隐藏字段和一个按钮的表单。单击该按钮时,我希望它运行一个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>

任何人都可以帮我解决这个问题,非常感谢你的时间。

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

您也可以使用此

<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>

答案 2 :(得分:0)

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

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