表格标签内容为: -
<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >
按钮标签内容为: -
<input type="submit" id="submit_button" value="Submit">
j查询功能
$('#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']);
但它不起作用......
答案 0 :(得分:3)
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) {
}
});
});
答案 1 :(得分:2)
最好的方法是首先不要使用submit
按钮。
<input type="button" id="myButton" value="Submit">
$('#myButton').on('click', function(){
//do ajax
});
答案 2 :(得分:0)
您需要阻止点击事件中的默认行为:
$('#submit_button').click(function (event)
{
event.preventDefault();
alert("button clicked");
return false; // Not truly necerssary
});
答案 3 :(得分:0)
因此,为了使提交按钮不以默认行为提交您的页面,请执行以下操作:
$('#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) {
}
});
});