单击提交按钮时防止页面重新加载并调用jquery函数答案

【问题标题】：prevent page reload and call a jquery function when submit button is clicked单击提交按钮时防止页面重新加载并调用jquery函数
【发布时间】：2012-08-31 11:40:26
【问题描述】：

表单标签内容为：-

<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >

按钮标签内容为：-

<input type="submit" id="submit_button" value="Submit">

j-query 函数是

$('#submit_button').click(function ()
            {        
                alert("button clicked");
                buildingVal = $("#building").val();
                levelVal = $("#level").val();
                data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();
                $.ajax(
                {

                    url: "res.php", 
                    type: "POST",
                    data: data,     
                    success: function (data) {
                    }
                });
                return false;
            });

页面正在重新加载，文本框和下拉菜单中的数据正在消失。

但如果我在 jquery 中只有这段代码：-

$('#submit_button').click(function ()
            {        
                alert("button clicked");
 return false;
            });

然后页面不会重新加载并且值保持不变。

请您告诉我如何防止页面重新加载？

同样在 ajax 调用中，我将调用一个页面 res.php，它将返回一个表格，

代码里会有什么

success: function (data) {
                    }

请帮忙...

编辑：

我正在使用代码将数据传递到 res.php 页面

data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

然后使用

将其传递到页面中

$.ajax(
                {

                    url: "res.php", 
                    type: "POST",
                    data: data,     
                    success: function (data) {
                        $('#npc').html(data);
                    }
                });

在 res.php 页面中

如何从传递的单个值中提取两个值

我尝试过使用以下代码

$building = mysql_real_escape_string($_GET['building']);
$level = mysql_real_escape_string($_GET['level']);

但它不起作用......

【问题讨论】：

标签： php jquery ajax reload

【解决方案1】：

你的 jQuery 代码有错误：

错误：

buildingVal = $("#building").val();
levelVal = $("#level").val();
data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

解决方案：

buildingVal = $("#building");
levelVal = $("#level");
data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();

完整代码js：

$('#submit_button').click(function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

   return false;

});

编辑

如果您曾经打算使用此表单通过 ajax 发送数据，最好的方法是取消“提交”表单事件：

HTML：

<form id="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >
...
</form>

JS：

$('#myform').bind('submit', function(event) {

     return false;
});

$('#submit_button').bind('click', function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

});

【讨论】：

这确实帮助我解决了问题的第一部分。但是第二部分仍然让我感到困惑..我在成功中写了什么：打印我从 res.php 页面回显的表格的函数。
@debal 我不知道返回“res.php”，但如果返回一个html，你应该替换你的html，例如$ (...). html (data)。如果您正在执行 ajax 调用，则必须替换要更新的数据。
你能帮我做一件事吗……我在原始问题的编辑中提到了它……
@debal 好的，但这是另一个问题，你能用这个创建另一个问题吗，在评论中将链接传递给我
我的新问题的链接是stackoverflow.com/questions/12215960/…

【解决方案2】：

最好的办法是一开始就不要使用submit 按钮。

<input type="button" id="myButton" value="Submit">


$('#myButton').on('click', function(){
   //do ajax
});

【讨论】：

【解决方案3】：

您需要阻止点击事件中的默认行为：

$('#submit_button').click(function (event)
{
    event.preventDefault();
    alert("button clicked");
    return false; // Not truly necerssary
});

http://api.jquery.com/event.preventDefault/

【讨论】：

【解决方案4】：

因此，为了让提交按钮不以默认行为提交您的页面，请执行以下操作：

$('#submit_button').click(function (event) {        
                event.preventDefault();
                buildingVal = $("#building").val();
                levelVal = $("#level").val();
                data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();
                $.ajax(
                {

                    url: "res.php", 
                    type: "POST",
                    data: data,     
                    success: function (data) {
                    }
                });                
});

【讨论】：