jQuery Ajax问题 [英] jQuery Ajax issue
问题描述
我正在使用jQuery验证注册"表单上的所有字段.不幸的是，最后的AJAX脚本没有像我想要的那样发布到PHP文件，也没有按照指定的那样对文档进行必要的更改.当我单击提交"时，它会像应该的那样清除错误标签，但似乎无济于事.
I am using jQuery to validate all of the fields on my Sign up form. Unfortunately the AJAX script at the end is not posting to the PHP file like I intended, also it is not making the necessary changes to the document as specified. When I click on submit, it clears out the error labels like it should, but seems to do nothing else.
此外，所有错误检查语句都可以正常工作.有什么想法吗?
Also, all of the error checking statements are working fine. Any ideas?
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
// Check if First Name is Blank
var firstname = $("input#firstname").val();
if (firstname == "") {
$("label#firstname_error").show();
$("input#firstname").focus();
return false;
}
// Check if Last Name is Blank
var lastname = $("input#lastname").val();
if (lastname == "") {
$("label#lastname_error").show();
$("input#lastname").focus();
return false;
}
// Check if Address is Blank
var address = $("input#address").val();
if (address == "") {
$("label#address_error").show();
$("input#address").focus();
return false;
}
// Check if City is Blank
var city = $("input#city").val();
if (city == "") {
$("label#city_error").show();
$("input#city").focus();
return false;
}
// Check if State is Blank
var state = $("select#state").val();
if (state == "") {
$("label#state_error").show();
$("select#state").focus();
return false;
}
// Check if ZIP Code is Blank
var zipcode = $("input#zipcode").val();
if (zipcode == "") {
$("label#zipcode_error").show();
$("input#zipcode").focus();
return false;
}
// Check if Phone Number is Blank
var phonenumber = $("input#phonenumber").val();
if (phonenumber == "") {
$("label#phonenumber_error").show();
$("input#phonenumber").focus();
return false;
}
// Check if Username is Blank
var username = $("input#username").val();
if (username == "") {
$("label#username_error").show();
$("input#username").focus();
return false;
}
// Check if Password is Blank
var password = $("input#password").val();
if (password == "") {
$("label#password_error").show();
$("input#password").focus();
return false;
}
// Check if Confirm Password is Blank
var confirmpassword = $("input#confirmpassword").val();
if (confirmpassword == "") {
$("label#confirmpassword_error").show();
$("input#confirmpasword").focus();
return false;
}
// Check if Passwords Match
if (password != confirmpassword) {
$("label#notmatching_error").show();
$("input#password").focus();
return false;
}
// Check if user picked valid username
var restrict = $("input#restrict").val();
if (restrict == "true") {
$("label#validuser_error").show();
$("input#username").focus();
return false;
}
var plan = $("select#plan").val();
var dataString = 'firstname='+ firstname +
'&lastname=' + lastname +
'&address=' + address +
'&city=' + city +
'&state=' + state +
'&zipcode=' + zipcode +
'&phonenumber=' + phonenumber +
'&username=' + username +
'&password=' + password +
'&plan=' + plan;
//alert(dataString); return false;
$.ajax({
type: "POST",
url: "../register_user.php",
data: dataString,
success: function() {
$('#buy_form').html("<div id='message'></div>");
$('#message').html("<b>Customer Information Logged</b>")
.append("Hello!")
.hide()
.fadeIn(1500, function() {
$('#message');
});
}
});
return false;
});
});
编辑
我彻底修改了代码以分解它，现在它正在运行PHP脚本，但是即使手动输入变量也不会发布.
EDIT
I entirely revamped the code to break it down and now it is running the PHP script but the variables are not being posted, even when entered manually.
var dataString = 'firstname='+ firstname +
'&lastname=' + lastname +
'&address=' + address +
'&city=' + city +
'&state=' + state +
'&zipcode=' + zipcode +
'&phonenumber=' + phonenumber +
'&username=' + username +
'&password=' + password +
'&plan=' + plan;
$.ajax({
type: "POST",
url: "register_user.php",
data: dataString,
success: function(){
alert( "Hello " );
}
});
感谢您到目前为止所提供的所有帮助.
thank you for all your help so far, almost there.
当我将成功更改为错误时，结果返回给我，这意味着存在http错误.这是什么意思?该页面是否存在，因为它已成功发布到数据库，但是信息没有通过?
Turns out when i change success to error it returns to me, so that means there is an http error. what does this mean? the page is there becasue it is successfully posting to the database but the information is not going through?
推荐答案
您是否尝试过使用 jQuery .post()?我认为$ .ajax最适合需要进行前/后操作的情况.
have you tried using jQuery.post()? I think $.ajax is used best for when you need pre-/post- operations.
例如
$.post("../register_user.php", $("#input").serialize(),
function(data){ /* etc.. */ });
要做您想做的事并且仍然使用相同的ajax函数，您可以这样做:
to do what you want and still use the same ajax function, you can do:
$.ajax({
type: "POST",
url: "../register_user.php",
data: $('form :input').serialize(),
success: function() {
$('#buy_form').html("<div id='message'></div>");
$('#message').html("<b>Customer Information Logged</b>")
.append("Hello!")
.hide()
.fadeIn(1500, function() {
$('#message');
});
}
});
我认为您的字符串有问题.我只是使用了您的代码，并将ajax选项从成功:更改为错误:并且有效.
I think it's a problem with your string. I just used your code and changed the ajax option from success: to error: and it works.
尝试以下HTML文件，替换您的jquery脚本，看看它是否有效(我将发布网址更改为名为ok.txt的文本文件，只是为了返回一些文本):
Try out the following HTML file, substituting your jquery scripts and see if it works (i changed the post url to a text file called ok.txt just to return some text):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery.js" type="text/javascript">
</script>
<script src="jqueryui.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('form').submit(function() {
$.ajax({
type: "POST",
url: "ok.txt",
data: $('form').serialize(),
success: function(data) {
$('#buy_form').html("<div id='message'><\/div>");
$('#message').html("<b>Customer Information Logged<\/b><br/>")
.append(data)
.hide()
.fadeIn(1500, function() {
$('#message');
});
}
});
return false;
});
});
//]]>
</script>
</head>
<body>
<div id="buy_form">
<form action="javascript:void(0);">
<div>
<input name="testInput" type="text" />
<input type="submit" />
</div>
</form>
</div>
</body>
</html>
这篇关于jQuery Ajax问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
