Question

这实际上是我第一次使用ajax，老实说，我不知道一件事。试图阅读关于ajax但没有运气的文章。我想在这里做的很简单，我只是想弄清楚ajax是如何工作的以及我应该做些什么才能使它工作。我想要它，以便当我尝试单击登录按钮并转到我的php并显示“登录成功”时，当文本框为空时它显示字段为空但ajax似乎不起作用

这是我到目前为止所做的，这是我的index.php A.K.A登录页面

<!DOCTYPE html>
<html>
<head>
	<title>O-Chat</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="script101.js"></script>
</head>
<body>
	<div class="content">
		<div class="features">
			<div><br><br><br><br><br><br><br><br><br><br>FEATURES HERE</div>
		</div>
		<div class="loginpart">
			<div class="banner"><br><br><br>BANNER HERE</div>
			<div class="login" id="divlogin">
				<div class="login-header">Login</div>
				<form name="loginform" class="login">
					<input class="login" type="text" name="pUname" id="jUname" maxlength="35" placeholder="Username"/><br>
					<input class="login" type="Password" name="pPass" id="jPass" maxlength="40" placeholder="Password"/><br>
					<span class="error" id="jloginerror"></span>
					<div class="button" id="login"" onclick="validate();">
					</div>
				</form>
				<div class="login-footer" onclick="location.href='register.php'">Not yet a member?<br>Register Now! Click Here!</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footer-container">
			<a href="index.php">Home</a> |
			<a href="aboutus.php">About O-Chat</a> |
			<a href="contactus.php">Contact Us</a>
			<div style="float: right;">Copyright © 2000 - 2017 O-Chat Unlimited (071813-S) All Rights Reserved</div>
		</div>
	</div>
</body>
</html>

这是我的javascript文件script101.js

function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
	document.getElementById("divlogin").style.height = '275px';
    document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
	document.getElementById("jloginerror").innerHTML = "";
	document.getElementById("divlogin").style.height = '250px';

	$.ajax({
        type: "post",
        url: "login.php",
        data: data,
        sucess:function(data){
            $("#jloginerror").text(data);
        }
    });
}
}

<?php
	echo "very successful";
?>

Answer 1

从函数声明$中删除$function validate()。你不能在这里使用$。

您可以像

一样使用它

$(function(){
....
});

OR

如果你想保留你的功能名称，那么只需在函数前删除$，只需将其用作：

function validate(){
....
}

在ajax上，您可以使用

$.ajax({
        method: "post",
        url: "login.php",
        data: data;
        sucess:function(data){
            $("#jloginerror").text(data);
        }
    });

因此，您的完整代码应如下所示：

 function validate() {
    var uname = $("#jUname").val();
    var pass = $("#jPass").val();
    var data = "&uname=" + uname + "&pass=" + pass;
    if(!uname.match(/\S/) || !pass.match(/\S/)) {
        document.getElementById("divlogin").style.height = '275px';
        document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
    }
    else
    {
        document.getElementById("jloginerror").innerHTML = "";
        $.ajax({
            type: "post",
            url: "login.php",
            data: data,
            sucess:function(data){
                $("#jloginerror").text(data);
            }
        });
    }
}

Answer 2

从function关键字中删除$，Jquery使用元素ID或名称var uname = $("#jUname").val(); var pass = $("#jPass").val();，不要使用;进行分隔，您应该使用, {{1} }，使用$.ajax({})而不是$.ajax({})，因为它的Jquery函数不是javascript函数。

ajax({})

AJAX调用javascript函数不起作用

2 个答案: