javascript函數上的AJAX調用不起作用
[英]AJAX call on a javascript function doesn't work
問題描述
這實際上是我第一次使用ajax，說實話我一無所知。 試圖閱讀有關ajax的文章，但沒有運氣。 我在這里嘗試做的事情很簡單，實際上我只是想嘗試弄清楚ajax的工作原理以及如何使其工作。 我想要它，以便當我嘗試單擊登錄按鈕並轉到我的php並顯示“ login success”時，當文本框為空時它可以顯示字段為空，但ajax似乎不起作用
到目前為止，這是我所做的，這是我的index.php AKA登錄頁面
<!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"; ?>
2 個解決方案
解決方案1
2 已采納 2017-02-02 05:58:35
從函數聲明$function validate()刪除$ 。 您不能在此處使用$ 。
您可以像
$(function(){
....
});
要么
如果您想保留函數名稱，則只需在函數前刪除$即可，只需將其用作：
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);
}
});
}
}
解決方案2
1 2017-02-02 06:00:50
從函數關鍵字中刪除$ ，然后Jquery使用元素ID或名稱var uname = $("#jUname").val(); var pass = $("#jPass").val(); var uname = $("#jUname").val(); var pass = $("#jPass").val(); 並且不要使用; 用於分離和你應該使用, $.ajax({})使用$.ajax({})而不是ajax({})因為它的jQuery函數沒有javascript函數。
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); } }); } }
JavaScript無法在Ajax調用上運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.