Question

每当有人在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>

Answer 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(){

中删除分号

Answer 2

在你想要达到的目标与你正在做的事情之间存在一些根本性的冲突。

使用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）从数据库输出到毫无疑问的地方用户。

Answer 3

这里的快速回答是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重定向

$ .post（）是否会加载新页面？

3 个答案: