AJAX通过jQuery更新页面

AJAX via jQuery updates the page

本文关键字：更新 jQuery 通过 AJAX      更新时间：2023-09-26

我有一个PHP脚本，它连接到数据库，做一个简单的选择并返回一个数字。脚本工作正常，我可以通过添加

来测试它
action="search_ODtime.php" method="POST"

到我的表单。但这一切都行不通。整个页面都在刷新，我什么也没得到。我花了一整天的时间想弄清楚这里到底出了什么问题。有人知道吗?

我的html文件: 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
      </script>
      <script type="text/javascript">
      $(document).ready(function() {
        $('#time_search').bind('submit', function() {
            var origin = $('#origin').val();
            var destination = $('#destination').val();
            alert(origin);
            $.ajax({
                type: "POST",
                url: "search_ODtime.php",
                data: 'origin=' + origin + '&destination=' + destination,
                success: function(data) {
                    $('#search_results').html(data);
                }
            });
        });
      });
      </script>
      </head>
      <fieldset style="font-size:11pt;  opacity: 1; color: white;">
        <form id="time_search">
          Orinig: 
          <input name="origin" id="origin" type="number" value="1" min="1" max="97">
          <br>
          Destination: 
          <input name="destination" id="destination" type="number" value="1" min="1" max="97">
          <br>
          <input type="submit" value="Get travel time" name="submit" id="submit" style="border-radius: 5px; display: block; margin: 10px auto 10px 0;">
        </form>
        Travel time:
        <div id="search_results">
        </div>
      </fieldset>
</body>
</html>

表单正在被提交。您可以:a)完全删除表单，并将提交按钮更改为常规按钮，然后将事件绑定到按钮而不是表单，或者b)阻止表单提交。

jQuery将事件对象传递给每个事件处理程序。事件对象有一个叫做preventDefault()的方法，它可以防止默认操作，无论是提交表单还是链接到页面或其他什么。

你需要通过为它添加一个变量将事件传递给函数，然后调用它的preventDefault()方法来防止表单提交和页面刷新。

$('#time_search').bind('submit',function(event) {
    event.preventDefault();
    var origin = $('#origin').val();
    var destination = $('#destination').val();
    alert (origin);
    $.ajax({
        type:"POST",
        url:"search_ODtime.php",
        data: 'origin='+origin+'&destination='+destination,
        success: function(data){ $('#search_results').html(data); }
    });
});

值得注意的事情:

:

当通过AJAX提交表单时，您需要阻止浏览器的默认提交行为，从而防止刷新页面。

('#time_search').bind('submit',function(e) {
     e.preventDefault();
第二:

尝试以JSON格式发送数据 eg。{"origin": origin， "destination": destination}

相关文章：