prevent页面重新加载并调用一个jQuery功能，当点击提交按钮 [英] prevent page reload and call a jquery function when submit button is clicked

问题描述

form标签的内容包括： -

The form tag contents are:-

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

按钮标签内容是： -

The button tag contents are :-

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

的J-查询功能

The j-query functions are

$('#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;
            });

的页是越来越重新加载，并且在文本框和下拉菜单的数据正在逐渐消失。

The page is getting reloaded, and the data in the textboxes and dropdown menus are disappearing.

但如果我只有这code。在jQuery的： -

but if i have only this code in the jquery:-

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

那么页面不会重新加载和值保持不变。

then the page doesn't reload and the values remains intact.

请你能告诉我，我该怎么prevent页面的重装？

Please could you tell me how am i to prevent the page from reloading?

另外，在Ajax调用我将调用页面res.php将返回一个表，

Also in the ajax call i will be calling a page res.php which will return a table,

会是什么code是在

success: function (data) {
                    }

请帮忙...

编辑：

我传递数据到res.php页面与code

I am passing the data into the res.php page with the code

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

，然后用它传递到页面

and then pass it into the page using

$.ajax(
                {

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

在res.php页

我如何提取这是通过单值的两个值

how do i extract the two values from the single value that was passed

我已经尝试使用下面的code试图

i have tried using the following code

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

不过，这并不工作...

But it doesn't work...

推荐答案

您有jQuery的code错误：

You have an error in jQuery code:

错误：

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

解决方法：

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

完成code JS：

Complete code 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发送数据时，最好的办法就是取消事件提交的形式：

If your ever going to use this form to send data by ajax, the best way is to cancel the event "submit" the form:

HTML：

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

记者：

$('#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) {
      }
   });

});

这篇关于prevent页面重新加载并调用一个jQuery功能，当点击提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！