Jquery - 在表单中选择项目并发布它们
Posted
技术标签:
【中文标题】Jquery - 在表单中选择项目并发布它们【英文标题】：Jquery - selecting items within forms and posting them 【发布时间】：2012-12-16 21:01:07 【问题描述】：我在下面有一个简单的 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';
我的问题是没有使用正确的选择器，还是有一些关于在表单中使用选择器提交按钮的规则？
【问题讨论】：
preventDefault() 表单的操作。 【参考方案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);
);
);
【讨论】：
太棒了，谢谢。我使用了 e.preventDefault();正如你所建议的那样，它在表单和字段集标记等方面工作得很好。你认为 JQuery 值得擅长吗？因为在这种带有表单和 post 方法的普通 javascript 的情况下，也可以正常工作。有时我认为虽然 Jquery 是 JavaScript 的简写形式，但所涉及的学习和有时需要的变通方法不值得仅仅拥有更短的代码吗？你怎么看？关于如何学好它有什么建议吗？ 我个人推荐它。轻松编写和重用代码有很多潜力。仅仅拥有选择器对我来说是值得的。我宁愿输入 $('#idName') 而不是 document.getElementById('idName'); - 对于类和元素名称更是如此，您不必担心跨浏览器的怪癖。另一个很好的理由是很多大公司都在使用 jQuery - 所以了解它会帮助你找工作:) Plain JS 也会有同样的问题。同样在这两种情况下，请指定表单的 onsubmit 而不是 onclick 的提交！ @mplungjan 很好，更新了答案。 OP，如果页面上有多个表单，您可能希望为表单分配一个 ID 并获取它，而不是仅仅使用 $('form')。【参考方案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 - 在表单中选择项目并发布它们的主要内容，如果未能解决你的问题，请参考以下文章
当单个表单中有多个下拉字段时，如何在 JQuery 中为选择标记引用选择器？