每当有人在id city中输入新文本时，我都会使用$ .post（）来加载页面。当我进入城市并移动到另一个领域时，没有任何反应。 Here是该网站。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Tuition Teacher</title>
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.navbar-nav{
float:right;
}
#slider-range, #slider-range2 {
width:168px;
margin-top:10px;
}
#slider-range2.ui-slider-horizontal {
border: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-range, #slider-range2.ui-slider-horizontal .ui-slider-handle {
background: url("http://unbug.ru/examples/jquery/slider/slide.png") repeat scroll 0 0 transparent;
}
#slider-range2.ui-slider-horizontal .ui-slider-range {
background-position: 0 -42px;
background-repeat: repeat-x;
height: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle {
background-position: 0 0;
background-repeat: no-repeat;
border: 0 none;
height: 21px;
top: 0;
width: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle:focus {
outline: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle + .ui-slider-handle {
background-position: -21px 0;
}
</style>
<script>
$(function() {
var availableTags = [
"Lahore",
"Karachi",
"Islamabad",
"Rawalpindi",
"Faisalabad",
"Multan",
"Gujranwala",
"Quetta",
"Peshawar",
"Hyderabad",
"Sialkot"
];
$( "#city" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
-->
<div id="navbar" class="collapse navbar-collapse text-right">
<ul class="nav navbar-nav ">
<li ><a href="login.html">Teachers Log In </a></li>
<li><a href="signup.html">Teachers Sign Up</a></li>
<li><a href="#">Tour</a></li>
<!--Sign Up
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
-->
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="row">
<div class="col-md-2">
<h2>Filter</h2>
City:<br>
<input id="city" placeholder="<?php echo $_POST['city'] ?>">
<hr>
Locality:<br>
<input id="locality" placeholder="Select Locality">
<hr>
Gender:<br>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
<hr>
<p>
Age range:<br>
<input type="text" id="amount"/>
</p>
<div id="slider-range"></div>
<hr>
Education:<br>
<input type="radio" name="education" value="high school">High School<br>
<input type="radio" name="education" value="intermediate">Intermediate<br>
<input type="radio" name="education" value="professional degree">Professional Degree<br>
</div>
<div class="col-md-9 col-md-offset-1">
<div class="row">
<div class="col-md-12">
<h2>Search Results</h2>
</div>
</div>
<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$city = $_POST["city"];
$sql = "SELECT id,full_name, email, password,full_address,city,age,contact_number,gender,education FROM users WHERE city='$city'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "Name:" . $row["full_name"]."<br> Email:". $row["email"]. "<br>City: " . $row["city"]. "<br>Age: " . $row["age"]. "<br>Contact Number:". $row["contact_number"]. "<br> Gender: " . $row["gender"]. "<br>Education:" . $row["education"];
echo "<br><hr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
</div>
</div> <!-- Container ends -->
<footer class="footer">
<div class="container">
<div class="row">
<p class="text-muted text-left col-md-6">Copyright 2015. All Rights Reserved.</p>
<p class="text-muted text-right col-md-6">Facebook - Twitter - LinkedIn.</p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="dropdown.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="ie10-viewport-bug-workaround.js"></script>
<script>
$(document).ready(function() {
$(function() {
$( "#slider-range, #slider-range2" ).slider({
range: true,
min: 15,
max: 100,
values: [15, 100 ],
slide: function( event, ui ) {
$( "#amount" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
" -" + $( "#slider-range" ).slider( "values", 1 ) );
});
$('#city').on('blur', function()
$.post( "search.php", { city: $('#city').val(); } );
});
});
</script>
</body>
</html>
答案 0 :(得分：1)
这是如何使用$.post
$('#city').on('blur', function() {
$.post( "search.php", { city: $('#city').val() } , function(){
alert(data);
});
});
在search.php中
<?php
echo $_POST['city'];
?>
输出应该是您的城市价值
修改：从$.post( "search.php", { city: $('#city').val() } , function(){
答案 1 :(得分：1)
在你想要达到的目标与你正在做的事情之间存在一些根本性的冲突。
使用AJAX（$ .post（））需要连接到只返回所需数据的服务器。通常它将采用JSON格式{“city”：“cityname”}。但是，$ .post（）会将自己定向到发布整个网页的search.php代码，并且恰好填写了该城市。
可能的解决方案：
忽略AJAX，删除$ .post（），并在Javascript中重新加载整个网页，如前所述window.location.replace("search.php?city=+"cityname);您可以使用Javascript来获取城市的价值，例如var cityname = $('#city').val;您还必须将php从$_POST['city']更改为$_GET['city']
创建一个名为searchajax.php的新文件，并将数据库和echo $ _POST放在那里，并更改代码以正确支持ajax。我不会在这里记录，因为互联网上充满了“如何做ajax”，例如http://labs.jonsuh.com/jquery-ajax-php-json/和using jquery $.ajax to call a PHP function以及3小时前我的评论显示jquery参考。
< / LI>最重要的是，您的代码都不会显示任何安全性或消毒。 Ajax, PHP - fetch from database http://www.peachpit.com/articles/article.aspx?p=1748185&seqNum=3即使使用选项1，也需要确保在数据库搜索中不能注入sql，并且不能将html（因此也没有javascript）从数据库输出到毫无疑问的地方用户。
答案 2 :(得分：0)
这里的快速回答是post只会在你告诉它的情况下加载一个新页面。 现在让我们介绍一下脚本中展示的一些基本内容。 首先，您不需要多个文档就绪事件处理程序（这是一个事件，那些是该事件的处理程序） 因此，简化您的脚本：
删除重复的事件处理程序并修复帖子中的小语法：
$(document).ready(function () {
var availableTags = [
"Lahore",
"Karachi",
"Islamabad",
"Rawalpindi",
"Faisalabad",
"Multan",
"Gujranwala",
"Quetta",
"Peshawar",
"Hyderabad",
"Sialkot"];
$("#city").autocomplete({
source: availableTags
});
$("#slider-range, #slider-range2").slider({
range: true,
min: 15,
max: 100,
values: [15, 100],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" -" + $("#slider-range").slider("values", 1));
$('#city').on('blur', function () {
$.post("search.php", {
'city': $('#city').val()
});
});
});
接下来，让我们访问ajax函数。首先，$.post只是$.ajax( SO的别名/快捷方式，让我们为完整性展示三种不同的方式来放入ajax调用：同时添加一个处理程序，用于从调用到服务器的返回新数据（无论是什么）
// first we create a post data object to simplify our examples
var mydata = {
'city': $('#city').val()
};
// next we show how to add a handler to the data return success event
$.post("search.php", mydata, function (returndata) {
// do somthing with returndata here
});
// same as the post but not using the alias
$.ajax({
type: "POST",
url: 'search.php',
data: mydata,
dataType: 'JSON',
success: function (returndata) {
// do something with returndata here
}
});
//finally we use the more modern example with the
var myjqxhr = $.ajax({
type: "POST",
url: 'search.php',
data: mydata,
dataType: 'JSON'
});
myjqxhr.done(function (returndata) {
// do something with returndata here
});
现在有了这样的理解，我们可以重新设计$.post以使用已完成的工作：
$.post('search.php', mydata)
.done(function (returndata) {
// do something with returndata here
});
现在没有这个实际上解决了你的问题 - 在该函数中返回了什么数据以及如何处理它 - 你必须决定然后做那个。
考虑到这一点，您可能想要检查所有三个条目（城市，性别，级别）的值是否已填写，已完成然后使用window.location.replace重定向