1

我在下面有一个简单的 html 页面调用 global.js 文件 global.js 文件调用一个 php 文件，如果它在数据库中，则该文件获取名称的位置。（本可以将所有内容放在一个页面上，但正在遵循教程）。

 <!doctype html>
 <html
   <head>
<title>AJAX Database</title>
</head>
<body>

Name: <input type = "text" id="name">
<br />
<input type="submit" id="submit" value="Get Loc">


<div id="output"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/global.js"></script>
</body>
 </html>

global.js 是：

$('#submit').on('click',function() {
var name = $('#name').val();
if($.trim(name) != ''){
   $.post('ajax/name.php', {name: name}, function(data) {
    $('div#output').text(data);
      });
}
});

它可以正常工作，但是如果我按如下所示输入标签，它将无法正常工作。我也想使用一个字段集，但我什至不能让它与表单标签一起工作。

我使用过其他选择器，但它不起作用。问题似乎出在提交按钮上，因为如果它不在表格中，它就可以工作。有什么想法吗？我认为在表单中使用提交会使 $.post 函数发送比我想要的更多。

 <!doctype html>
 <html
 <head>
<title>AJAX Database</title>
</head>
<body>

    <form>
Name: <input type = "text" id="name">
<br />
<input type="submit" id="submit" value="Get Loc">
</form>

<div id="output"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/global.js"></script>
</body>
 </html>

php文件是： 

 if(isset($_POST['name']) === true && empty($_POST['name']) === false) {
  require '../db/connect.php';

$query = mysql_query("
SELECT `names`.`location`
FROM    `names`
WHERE `names`.`name` = '" . mysql_real_escape_string(trim($_POST['name'])) . "'

");
echo (mysql_num_rows($query) !== 0) ? mysql_result($query,0,'location') : 'Name not found';

 }

我的问题是没有使用正确的选择器，还是有一些关于在表单中使用选择器提交按钮的规则？

4

2 回答 2

0

您需要阻止表单的默认操作。通过在函数末尾使用event.preventDefault()或添加。return false

$('form').on('submit', function(e) {
    e.preventDefault();
    var name = $('#name').val();
    if ($.trim(name) != '') {
        $.post('ajax/name.php', {
            name: name
        }, function(data) {
            $('div#output').text(data);
        });
    }
});​
于 2013-01-02T13:36:03.913 回答
0

我强烈建议不要使用单击按钮，而是建议这样做

<!doctype html>
 <html
 <head>
   <title>AJAX Database</title>
   <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
   <script src="js/global.js"></script>
</head>
<body>

  <form id="form1">
    Name: <input type="text" id="name"><br />
    <input type="submit" id="submit" value="Get Loc">
  </form>

  <div id="output"></div>
</body>
</html>

脚本在哪里

$('#form1').on('submit', function(e) {
    e.preventDefault();
    var name = $('#name').val();
    if ($.trim(name) != '') {
        $.post('ajax/name.php', {
            name: name
        }, function(data) {
            $('div#output').text(data);
        });
    }
    else {
      alert('Please enter name');
      $('#name').focus();
    }
});​
于 2013-01-02T16:25:36.083 回答