AJAX通过提交按钮实时检查可用性
- test1.php
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#username').change(function(){
var userName = $('#username').val();
$.post("getUserName.php", {userName: userName}, function(data){
$("#userNameCheck").html(data);
});
});
$('#submit').click(function(){
//CODE HERE
});
});
</script>
</head>
<body>
<form action="" method="post" id="addform">
Username: <input type="text" name="username" id="username" size="24" class="required" maxlength="22" />
<div id="userNameCheck"></div>
<input type="submit" id="submit" name="submit" value="ADD user" />
</form>
</body>
</html>
- getUserName.php
<?php
include("db.php");
$userName = $_POST['userName'];
$q = "select user_name from user where user_name = '".$userName."'";
$r = mysqli_query($dbc, $q);
$num = mysqli_num_rows($r);
if($num)
{
echo '<div style="color:red">Username taken. Please type another new one.
</div>';
}
else
{
echo '<div style="color:green">You can use it.</div>';
}
?>
- 数据库（用户表）
user_id user_name
1 ali
2 abu
-
从上面开始：
=> 在文本框中键入“ ali ”->显示绿色消息“您可以使用它”。
=> 在文本框中键入 ahmad- >以红色显示“ Username included …”消息。 -
我的要求是，如果消息是“您可以使用它”，请转到test2.php；如果消息是“用户名已使用…”，则表单上没有提交。
-
我的问题是，当我单击“提交”按钮时，如何控制“您可以使用它”或“获取用户名”消息？
问题答案：
不要使用按钮的单击处理程序，而要使用表单提交事件。
$(document).ready(function () {
$('#username').change(function () {
var userName = $('#username').val();
$.post("getUserName.php", {
userName: userName
}, function (data) {
$("#userNameCheck").html(data);
});
});
$('#addform').submit(function () {
//if the text is `You can use it` allow the form submit else block it
return $("#userNameCheck").html().trim() == 'You can use it';
});
});
还要确保您执行相同的验证，test2.php因为客户端验证可以分步进行。
-
我使用bootstrap模式获得了一个register表单，它将调用ajax post函数。 但是，它似乎并不执行我的$.post。另外，如何将php函数的返回值使用到ajax数据中？那么，如果我的createAccount返回true或其他值，我的ajax如何捕获它呢？ 我的阿贾克斯。 我的CreateAccount.php 我的函数.php
-
问题内容： 好吧，我试图通过按Enter提交表单，但不显示提交按钮。我不希望尽可能地使用JavaScript，因为我希望所有功能都可以在所有浏览器上正常工作（我知道的唯一JS方式就是使用事件）。 现在，表单如下所示： 哪个效果很好。当用户按下Enter键时，提交按钮将起作用，并且该按钮在Firefox，IE，Safari，Opera和Chrome中不显示。但是，我仍然不喜欢该解决方案，因为很难知道
-
问题内容： 我正在尝试使用以下API获取实时汇率。 当我单击一个按钮时，它会提示速率并正常工作。我正在使用以下Ajax代码。 Ajax请求转到以下页面。 ，其中包含唯一的按钮，当单击该按钮时，将对此URL发出Ajax请求。 一切都很好。但是，当我将按钮类型从更改为时，问题就出现了，它不起作用。Ajax函数的错误部分中的 警报框只显示了一段时间，然后突然消失了 。我找不到任何可能导致无法完成此请求的
-
问题内容： 我有一个看起来像这样的表格： 当我绑定到表单的Submit（）时，似乎无法访问用户单击的图像。因此，我试图绑定到单击图像本身（），该图像总是提交表单，无论我是否尝试 返回false； event.stopPropogation（）; 要么 event.preventDefault（）; 因为所有这些都是表单事件。 我应该将$ .post（）附加到form.submit（）事件上吗，如果
-
表单按钮一般分为三类，分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用，普通按钮则可以在网页的任何地方使用。 从本质上讲，表单按钮也是表单控件，之所以把它分离出来，单独介绍，是因为它的功能比较特别。提交按钮用于把表单数据发送到服务器，重置按钮用于重置整个表单的数据，普通按钮则需要开发者赋予它功能。 当用户点击提交按钮和重置按钮时，就有动作发生，一般不需要添加动作；而普通按钮，
-
问题内容： 我在控制器中有这个： 我想从： 如何通过使用Ajax调用来提交此信息我需要让此表单提交的JQuery ajax调用。 而且我想确保数据类型，谢谢 问题答案： 试试这个