Question

我正在尝试关注tutorial和demo。但是当我按下SUBMIT或ENTER按钮时，它没有提交，它只是刷新页面:(并显示错误。

显示警告

请求存在问题。

页面刷新。

我的表单

<form class="well-home span6 form-horizontal" name="ajax-demo" id="ajax-demo"> <div class="control-group">
              <label class="control-label" for="book">Book</label>
              <div class="controls">
                <input type="text" id="book" onKeyUp="book_suggestion()">
                <div id="suggestion"></div>
             </div>  </div>  <div class="control-group">
              <div class="controls">
                <button type="submit" class="btn btn-success">Submit</button>
              </div>  
       </div> 
</form>

和我的Javascript

<script>
function book_suggestion()
{
var book = document.getElementById("book").value;
var xhr;
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "book_name=" + book;
     xhr.open("POST", "book-suggestion.php", true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xhr.send(data);
     xhr.onreadystatechange = display_data;
    function display_data() {
     if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       //alert(xhr.responseText);      
      document.getElementById("suggestion").innerHTML = xhr.responseText;
      } else {
        alert('There was a problem with the request.');
      }
     }
    }
}
</script>

图书-suggestion.php

<?php  
include('../includes/dbopen.php');  
$book_name = $_POST['book_name'];  
$sql = "select book_name from book_mast where book_name LIKE '$book_name%'";  
$result = mysql_query($sql);  
while($row=mysql_fetch_array($result))  
{  
echo "<p>".$row['book_name']."</p>";  
}  
?>

Answer 1

那里使用的提交按钮没有参与演示。该演示的目的是展示当用户在文本框中键入数据时如何使用ajax 获取数据。它可能肯定会被扩展，以便提交按钮作用于并添加更多功能，但是目前尚未添加到演示中。

如何在SUBMIT或ENTER按钮上提交表单

1 个答案: