Question

我在调用global.js文件时有一个简单的html页面，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';

 }

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

Answer 1

您需要阻止表单的默认操作。通过使用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);
        });
    }
});

Answer 2

我强烈建议不要点击按钮，而是建议

<!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();
    }
});

Jquery - 选择表单中的项目并发布它们

2 个答案: