使用jQuery向服务器发送AJAX请求

我想使用AJAX向同一个url发送一个非常基本的post请求。 它应该使用用户名并对数据库进行检查，以查看是否已存在具有该名称的用户，并返回该字符串。 发送请求的javascript函数有问题：

function usernameCheck(){ $.post("http://omnicloud.me/signup", {username: $("#username").value}, function(response){ if(response=="true"){ $('#passAlert').innerHTML("Sorry, that username is already taken") } }); return !($('#passAlert').value == "Sorry, that username is already taken") } 

如果此人刚刚加载了注册视图，它将返回页面，否则，将调用它来检查用户是否存在：

 def signup(request): if request.method == 'GET': return render_to_response('signup.html', context_instance=RequestContext(request)) else: #query db for user with username provided in POST, return if it exists user = User.objects.get(username=request.POST["username"]) if user is not None: return HttpResponse("true") else: return HttpResponse("false") 

你有什么可以看到JS被忽略的原因吗？ 萤火虫一无所获。

Answer 1

首先，您在视图中遇到了一些问题。 您需要检查POST是来自AJAX还是标准POST; 否则，您将无法在以后实际添加用户。 （真的，AJAX部分应该是它自己的视图，因为它本身并不是注册过程的一部分，而是validation检查。后来，你可能真的想要通过AJAX创建用户，你将无法做到因为视图无法区分两个不同的AJAX请求）。

接下来，当对象不存在时， get不返回None ; 它引发了一个ObjectDoesNotExistexception。 所以，你的if语句不起作用; 你必须使用try块。

我相应地更新了您的观点：

 def signup(request): if request.method == 'GET': return render_to_response('signup.html', context_instance=RequestContext(request)) elif request.is_ajax(): # query db for user with username provided in POST, return if it exists try: user = User.objects.get(username=request.POST["username"]) except User.DoesNotExist: return HttpResponse("false") else: return HttpResponse("true") else: # Normal post, add new user 

Answer 2

Ajax的意思是“异步JavaScript和XML”，因此它不会等待$ .post完成，而只是在你的代码中继续。

要解决此问题，您必须使用回调函数：

http://api.jquery.com/jQuery.post/

jQuery.post（url [，data] [，success（data，textStatus，jqXHR）] [，dataType]）

url包含发送请求的URL的字符串。

data与请求一起发送到服务器的映射或字符串。

success（data，textStatus，jqXHR）如果请求成功则执行的回调函数。

dataType服务器所需的数据类型。 默认值：智能猜测（xml，json，脚本或html）。

样品：

 function usernameCheck(){ $.post("http://omnicloud.me/signup", {username: $("#username").val()}, function(response){ if(response=="true"){ $('#passAlert').html("Sorry, that username is already taken") } }); } 

您也可以传递匿名回调：

 function usernameCheck(successCallback){ $.post("http://omnicloud.me/signup", {username: $("#username").val()}, function(response){ if(response=="true") successCallback(); }); } // Somewhere else in your code: usernameCheck(function(){ $('#passAlert').html("Sorry, that username is already taken") }); 

Answer 3

编辑：确保响应发回STRING true或STRING false

编辑：响应正在发送回STRING true或A STRING false

 function usernameCheck(){ var exists; $.post("http://omnicloud.me/signup", { username: $("#username").val() }, function(response){ exists = (response == 'true'); if(exists){ $('#passAlert').innHTML = "Sorry, that username is already taken"; return false; } else { return true; } });